隽永东方设计工作室
Eastern Design Studio Menu

WordPress网站随设备屏幕宽度自适应终极教程

1 星2 星3 星4 星5 星
(14 票, 评分: 4.64 总分 5)  

1000元 立即订购Responsive设计  

 

responsive-design

一直都想写一篇WordPress网站随各种不同的设备屏幕宽度自适应的教程,相信很多用WordPress建站的朋友都考虑过网站在各种不同设备上的兼容性问题,之所以说是不同的设备,因为现在移动互联网的天下,用来上网的已经远远不局限于PC机,还有各种智能终端,包括iPhone,iPad,Android等等,于是乎兼容如此多的不同宽高比尺寸的设备变得似乎极其的困难,事实当然没有想象的那么难了,暂且抛开那么多不同设备不同尺寸让你头大的难题,暂且直接从自己网站的CSS样式的兼容性入手,让自己的网站能在浏览器宽度不断伸缩的过程中保持无缝对接,听起来是不是很酷,对的,我们今天要做的就是一件如此酷的事情,OK,闲话少说言归正传。

为了演示方便,大家姑且就用本站 www.eastdesign.net 来作为例子吧,通过此工具https://testmysite.withgoogle.com/intl/en-gb?utm_source=google_search&utm_medium=dcallout&utm_campaign=c_us 检测所得的分数:

从以上截图可以看到本站在iPad上横屏和竖屏上表现比较完美,尤其是右侧侧边栏在竖屏的时候自动无缝的移动到了底部,并且自动放大了宽度尺寸来自适应屏幕宽度。

通过以上演示,已经大致描述清楚了我们此教程的目的了,当然以上仅仅演示了主流苹果设备的显示效果,如果需要测试更多的效果,推荐大家一款绝对实用的测试工具, 通过这个测试工具可以测试几乎所有主流的智能终端设备,这里有一个很有用的功能就是,当你电脑自身的分辨率只能最多达到比如1280*800的时候,通过这个工具你可以测试网站在其他超过1280*800设备上的效果,最多可以达到1920*1200的分辨率,这样事实上已经省去了必须配置大屏幕显示器的麻烦了,当然话说回来,大屏幕显示对于项目调试等还是必须的,毕竟目前的显示器价格已经趋近于萝卜白菜了。

好了我们正式开始实际的教程吧,因为实现本教程的效果并没有唯一的方法,毕竟每个网站的layout结构不同,实现自适应的方法不尽相同,我们着重介绍实现的思路,算是抛砖引玉,首先要让你的WordPress站点能够具备随着设备宽度自适应的能力,在模版header.php里边插入如下代码:

插入如上代码以后,用不同宽度的设备进行查看网站的时候,你会发现网站字体尺寸不会随着屏幕变小而变小,只是布局因为宽度变小而自动往下延伸,这样接下来我们要做的就是调整网站的CSS样式表,这里我们介绍一下思路,基本实现的思路就是结合你网站的layout布局,凡是涉及布局的样式一律不要写死成width=”678″之类的,而是写成类似max-width=”678″,或者是width=”60%”,这样才能确保屏幕变窄以后内容会自动往里缩进,当然这里问题会随着而来,比如以本站为例,网站首页左上角导航下方有一个苹果显示器显示案例的效果,因为宽度是固定死的,一旦屏幕宽度小于这个固定宽度的时候,这个显示器势必导致整个布局向右暴力延伸了,那么必须确保宽度尺寸小于某个固定值的时候,这个案例展示的区块自动隐藏,听起来似乎挺高深的,实际上对于强大的CSS来说小菜一碟,实现方法为在模版style.css底部插入一系列的基于@media的hack样式,定义具体不同的尺寸下,用某个新的样式来覆盖默认样式,从而实现上边描述的效果,举例如下:

这段样式的作用就是在屏幕宽度小于639像素的时候,加入{}中的这段样式,从而轻松的实现了对这个案例展示区块的自动隐藏效果,是不是很简单?以此类推,其他的比如右侧sidebar自动下移,然后扩展宽度的实现方法大同小异,都是通过增加如上类似的Hack代码来覆盖默认的样式达到改变不同的显示效果的目的。

上述方法事实上有效的避开了对于所有不同设备的宽度的判断,如此多的不同设备,宽度尺寸这么多,挨个判断,挨个去自适应想起来都头大,那么何不从网站层面去彻底实现对几乎所有宽度尺寸的自适应呢,这样以后还用得着担心又新出来了一个iPhone20吗?

1000元 立即订购Responsive设计  



       

  售前在线询价单
  全网营销套餐
  全网营销小密圈