响应式WordPress主题是如何开发的?

响应式网站是未来网站的大趋势,越来越受到众多网站站长的追捧。当然,作为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博客主题来说,改成响应式有点麻烦,但是,只要花点心思,同样可以做出出色的响应式。

标签

发表评论