wordpress CMS主题如何让PC和移动端使用不同的模板样式——响应式布局？

在WordPress主题开发过程中，为了方便，我们一般采用响应式布局来做wordpress网站，以适应不同的终端。这也是为了让用户在不同的终端上都能看到效果良好的网站布局。作为开发者，我一般采用2种方案来让我的wordpress CMS主题来适应不同的终端。

方案一：完全通过CSS来控制：

这种方案也是大多数WordPress主题开发者所采用的。因为，只需要一个CSS文件，就可以简单实现。

首先，在页面头部添加viewport标签

width：viewport的宽度 【屏幕宽度】
height：viewport的高度
initial-scale ：初始的缩放比例
minimum-scale ：允许用户缩放到的最小比例
maximum-scale：允许用户缩放到的最大比例
user-scalable：用户是否可以手动缩放

然后，通过CSS根据屏幕宽度来控制布局：

@media screen and (max-width:320px){  //当屏幕宽度 <= 320px时
html{ font-size:12rem; }  //这里，我们就可以设置页面元素在屏宽320px内的样式
}

方案二：先判断终端是PC还是移动端：

意思是说：先通过php或其它方式判断当前访问网站的是手机还是电脑，然后再根据判断来布局。对于布局比较复杂、页面调用数据库比较多的情况下，这种方案比较适用，它可以让一些调用在手机端不调用，以减少数据库调用次数而提升手机端响应时间。

判断终端函数放到functions.php文件中：

function is_mobile() {
$user_agent = $_SERVER['HTTP_USER_AGENT'];
$mobile_browser = Array(
"mqqbrowser", //手机QQ浏览器
"opera mobi", //手机opera
"juc","iuc",//uc浏览器
"fennec","ios","AppleWebKit/420","applewebkit/525","applewebkit/532","ipad","iPhone","ipaq","ipod",
"iemobile", "Windows ce",//windows phone
"240x320","480x640","acer","android","anywhereyougo.com","asus","audio","blackberry","blazer","coolpad" ,"dopod", "etouch", "hitachi","htc","huawei", "jbrowser", "lenovo","lg","lg-","lge-","lge", "mobi","moto","nokia","phone","samsung","sony","symbian","tablet","tianyu","wap","xda","xde","zte"
);
$is_mobile = false;
foreach ($mobile_browser as $device) {
if (stristr($user_agent, $device)) {
$is_mobile = true;
break;
}
}
return $is_mobile;
}

在需要判断的地方添加这个函数来判断，如：在header.php头部文件中判断，如果是PC端就调用style.css文件，如果是移动端就调用mobile.css样式文件：

if(is_mobile()){
echo '<meta name="viewport" content="width=device-width, initial-scale=1/>';
echo '';
}else{
echo '';
}

这样，在PC端就会显示PC端的样式，在手机端就会显示手机端的样式。当然，在页面的其它地方也可以用这个函数来处理，如：PC端有幻灯片，而手机端就不想使用幻灯片…… 等。开发wordpress CMS主题时，以上2种方案都可以使用。