10 次查询 耗时 0.053 秒
共写了413个字,约2分钟读完,共有0条留言
登录/注册
  • 首页
  • »
  • 时光机
  • »
  • WordPress主题开发:手机、电脑、平板自适应
  • WordPress主题开发:手机、电脑、平板自适应

    作者:胡永云

    日期:2020年03月18日

    在WordPress主题开发的时候如何让布局兼容多个终端,做到手机、电脑、平板自适应呢?

    在这里分享一种响应式布局解决方案,在主题的style.css文件中加入如下代码:

    /*手机*/
    
    @media screen and (max-width:600px){
    /*这里写手机端的样式*/
    }
    
    /*平板*/
    
    @media screen and (min-width:600px) and (max-width:960px){
    /*这里写平板的样式*/
    
    }
    
    /*PC*/
    
    @media screen and (min-width:960px){
    /*这里写电脑端的样式*/
    }

    响应式布局的优点是:1、面对不同分辨率设备灵活性强。2、能够快捷解决多设备显示适应问题。

    缺点:不能完全兼容所有浏览器,代码累赘,加载时间加长。

    原理:简单点说响应式布局它是通过CSS中Media Query(媒介查询)@media功能,来判断我们的终端设备宽度在多少像素内,然后就执行与之对应的CSS样式。

    Back Top
    — 于 共写了413个字
    — 文内使用到的标签:
    — 本作品采用 知识共享署名-非商业性使用-相同方式共享 4.0 国际许可协议 进行许可

    “WordPress主题开发:手机、电脑、平板自适应”共有0条评论

    发表评论