• wordpress CMS主题:ssmay主题wordpress CMS主题:ssmay主题
  • 首页 > wordpress CMS主题制作 > wordpress CMS主题如何让PC和移动端使用不同的模板样式——响应式布局?

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

    作者: 分类:wordpress CMS主题制作 点击: 334 次
    wordpress CMS主题:ssmay主题

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

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

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

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

      <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
      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 '<link rel="stylesheet" type="text/css" href="'.THEME_PATH.'/mobile.css">';
      }else{
      echo '<link rel="stylesheet" type="text/css" href="'.THEME_PATH.'/style.css">';
      }

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



      QQ二维码

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

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

    或许你会感兴趣的文章:

    发表评论

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

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