32 次查询 耗时 0.051 秒
2020年03月18日发布,共写了413个字,约2分钟读完

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

Back Top

发表评论

* 为必填项。欢迎踊跃发言,你的观点将一针见血!