响应式网站是未来网站的大趋势，越来越受到众多站长的追捧。当然，作为wordpress站长，也不会落后，所以在开发wordpressCMS主题时，我们也要努力地向响应式的wordpress主题方向发展。什么是响应式？就是一个网页在不同的客户端都能正常显示，比如一个非响应式网页在PC端能正常显示，而在手机端依然会按PC布局…
响应式网站是未来网站的大趋势，越来越受到众多站长的追捧。当然，作为wordpress站长，也不会落后，所以在开发wordpressCMS主题时，我们也要努力地向响应式的wordpress主题方向发展。什么是响应式？就是一个网页在不同的客户端都能正常显示，比如一个非响应式网页在PC端能正常显示，而在手机端依然会按PC布局显示，那样，页面字体及宽度都是和手机浏览不相附的。而响应式网页不会这样，PC端以PC端的样式显示，手机端就以手机端的样式显示。
那么，响应式WordPress主题是如何开发的？有以下关键三步：
第一步：判断客户端。
在wordpressCMS主题的header.php文件的<head></head>之间添加判断客户端的代码。也就是先判断一下，是手机还是pc。代码如下：
<linkrel=”stylesheet”type=”text/css”href=”/lib/css/style.css”media=”screenand(min-width:640px)”/>
<linkrel=”stylesheet”type=”text/css”href=”/lib/css/style-mobile1.css”media=”screenand(min-width:300px)and(max-width:480px)”>
<linkrel=”stylesheet”type=”text/css”href=”/lib/css/style-mobile2.css”media=”screenand(min-width:480px)and(max-width:640px)”>
上面这段代码做了3次判断：第1句是“屏幕宽度最小为640px”，第2句是“屏幕宽度最小300px，最大480px”，第3句是“屏幕宽度最小480px，最大640px”。目前，手机屏幕一般在300~640px之间。
第二步：在HTML头部增加viewport标签。
<metaname=”viewport”content=”width=device-width,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no”>
参数解说：
viewport视窗
width-视窗的宽度
height-视窗的高度
initial-scale-初始的缩放比例
minimum-scale-允许用户缩放到的最小比例
maximum-scale-允许用户缩放到的最大比例
user-scalable-用户是否可以手动缩放
第三步：添加不同客户端的CSS样式。
然后，我们需要为不同的客户端添加不同的CSS样式，在第一步中的代码中，我们添加了不同的样式文件，第1句中我们添加的样式文件名是style.css，第2句中添加的样式文件名是style-mobile1.css，第3句中添加的样式文件名是style-mobile2.css。这样一来，我们就可以在不同的客户端上浏览到不同的效果。
如果你也想让自己的wordpressCMS主题也变成响应式主题，那就不妨试试上面的方法吧。虽然wordpressCMS主题相对于wordpress博客主题来说，改成响应式有点麻烦，但是，只要花点心思，同样可以做出出色的响应式。
评论(0)