wordpress CMS主题 微信
  • 全部教程
  • Home > wordpress CMS主题制作 > 如何开发响应式的wordpress CMS主题?

    如何开发响应式的wordpress CMS主题?

    高时银博客 wordpress CMS主题制作 点击: 1,673 次 0 0

    响应式网站是未来网站的大趋势,越来越受到众多站长的追捧。当然,作为wordpress站长,也不会落后,所以在开发wordpress CMS主题时,我们也要努力地向响应式的wordpress主题方向发展。什么是响应式?就是一个网页在不同的客户端都能正常显示,比如一个非响应式网页在PC端能正常显示,而在手机端依然会按PC布局显示,那样,页面字体及宽度都是和手机浏览不相附的。而响应式网页不会这样,PC端以PC端的样式显示,手机端就以手机端的样式显示。

    那么,应该怎样来开发响应式的wordpress CMS主题呢?有以下关键三步:

    第一步:判断客户端。

    在wordpress CMS 主题的header.php文件的<head></head>之间添加判断客户端的代码。也就是先判断一下,是手机还是pc。代码如下:

    <link rel="stylesheet" type="text/css" href="/lib/css/style.css" media="screen and (min-width:640px)" />
    <link rel="stylesheet" type="text/css" href="/lib/css/style-mobile1.css" media="screen and (min-width: 300px) and (max-width: 480px)">
    <link rel="stylesheet" type="text/css" href="/lib/css/style-mobile2.css" media="screen and (min-width: 480px) and (max-width: 640px)">

    上面这段代码做了3次判断:第1句是“屏幕宽度最小为640px”,第2句是“屏幕宽度最小300px,最大480px”,第3句是“屏幕宽度最小480px,最大640px”。目前,手机屏幕一般在300~640px之间。

    第二步:在HTML头部增加viewport标签。

    <meta name="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。这样一来,我们就可以在不同的客户端上浏览到不同的效果。

    如果你也想让自己的wordpress CMS主题也变成响应式主题,那就不妨试试上面的方法吧。虽然wordpress CMS主题相对于wordpress博客主题来说,改成响应式有点麻烦,但是,只要花点心思,同样可以做出出色的响应式。


    文章作者:高时银博客
    本文地址:http://wanlimm.com/77201508174789.html
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    目前还没有评论。赶快来坐沙发吧。

    发表评论