移动互联网已是现在网名上网的主流，越来越多的人通过手机上网来查看信息，所以，如果用WordPress做网站，移动端的网页效果就不得不考虑进去。很多大站都是PC和移动分开做的，如：新浪、腾讯等这样的门户站。这种分离方案，是可取的，不过，对于wordpress做成的小站来说，就没有必要这么复杂地做2套模板，我们完全可以通过响应式布局，让网页在多个终端上都能正常显示 。

方案一：多个CSS文件。

就是为不同的终端创建不同的CSS文件。主要是在网页的head头加入判断屏幕宽度的代码，如下：

上面代码第一句意思是：当屏幕宽度是320px以内时，就调用style1.css这个样式。第二句的意思是：当屏幕宽度是320~400之间时，就调用style2.css这个样式文件。

方案二：只用1个CSS文件。

所有终端只用一个CSS文件来实例响应式布局。对不同宽度的判断放到这个CSS文件中，如下：

@media screen and  (max-width: 320px) {
html { font-size:14px;}
}
@media  screen and (min-width: 320px) and (max-width: 440px) {
html { font-size: 16px;}
}

上面的代码意思是：当屏幕是320px宽度时，html的字体大小是14px；当屏幕宽度是320~440之间时，字体大小是16px。

方案三：JS+rem实现响应式

要求CSS文件中的大小单位为rem，然后通过JS代码来根据不同的屏幕宽度更改网页块等元素的大小。JS代码如下：

(function(win,doc){
var oContainer=doc.getElementById('container'); /* 获取页面主体最大元素 */
var oHtml=doc.getElementsByTagName('html')[0]; /* 获取 html 元素 */
fnResetHtmlFontSize();
function fnResetHtmlFontSize(){ /* 缩放函数 */
var iContainerWidth=oContainer.offsetWidth; /* 获取主体在当前手机浏览器的宽度 */
oHtml.style.fontSize=iContainerWidth/10+'px'; /* 设置根元素字体大小 = 主体宽度 / 10 */
}
win.addEventListener('resize',fnResetHtmlFontSize,false); /* 当屏幕宽度发生变化时，执行缩放函数 */
})(window,document);

这种方案的优点是：不需要在头部和CSS文件中做屏幕判断了，CSS文件相对来说，代码会少很多，不需要根据不同的宽度来设置DIV等元素的不同的大小了。缺点是：如果浏览器禁用了JS，响应式就会失去效果。

介绍了这3种wordpress网站响应式布局方案，可以根据自己网站的情况选择适合自己的。不管哪一种都可以让你的网站在不同的终端上都可以达到理想的显示效果。个人比较推崇第3种方案，可以省去好多代码。