17 次查询 耗时 0.061 秒
共写了413个字,约2分钟读完,有0条留言
登录/注册

时光机 · 2020年3月18日 0

WordPress主题开发:手机、电脑、平板自适应

在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样式。