• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > 如何开发响应式的wordpress CMS主题?

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

    作者: 分类:wordpress CMS主题制作 点击: 2,203 次
    wordpress CMS主题:ssmay主题

      响应式网站是未来网站的大趋势,越来越受到众多站长的追捧。当然,作为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
    本文时间:2015-08-17 14:10:29
    版权所有 © 转载时必须以链接形式注明作者和原始出处!

    上一篇:
    下一篇:
    wordpress CMS主题:ssmay主题

    或许你会感兴趣的文章:

    发表评论

    电子邮件地址不会被公开。 必填项已用*标注

    This site uses Akismet to reduce spam. Learn how your comment data is processed.