谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法

rem是css3新增的一个相对单位，相对的只是HTML根元素，可以只修改根元素字体大小就可以成比例地调整所有字体大小。我们可以巧妙地利用这一特性，实现页面自适应布局。

demo:https://github.com/XieTongXue/how-to/tree/master/pay-h5

需求：

当我们拿到一张设计稿，比如UI设计师设定的是iPhone6下的750px*1334px，那么我们应该如何实现适配iPhone5、iPhone4以及其他不同尺寸的屏幕？

有的伙伴也许想到了媒体查询，定制多套css样式。首先，我不否定这样做能实现，但这样的工作量还是比较大的，而且代码量也会很多，不利于性能优化。

实现方法：

以下介绍一种用JavaScript结合相对单位rem实现的方式。

①：在里加上以下代码（设置viewpoint缩放为1.0）

 

 

②：编写脚本语言，动态设置根元素字体大小，其中designW为设计稿的宽度，其他值固定。

 

 

③：以上设置完成后，就可以根据设计稿的像素完成网页的编写，假设设计稿中的一张img的大小为200px*300px,那么样式设置成如下：

 

img{
    width: 2rem; 
    height: 3rem; 
}

以上三步即可实现页面的只适应布局。（注：对图片清晰度要求较高）

具体应用例子可参考本人另外一篇文章：https://blog.csdn.net/fabulous1111/article/details/78598425

运行效果：

iphone 6/7/8展示效果：

iphone5展示效果：

ipad展示效果：

 

更新：

2018-07-11更新如下：

以上方法缺点原因：viewport的设置和屏幕物理分辨率是按比例而不是相同的. 移动端window对象有个devicePixelRatio属性, 它表示设备物理像素和css像素的比例, 在retina屏的iphone手机上, 这个值为2或3, css里写的1px长度映射到物理像素上就有2px或3px那么长。

影响举例：假如一个设备的devicePixelRatio是2，按照以上方法的话，比如在iPhone6下，设置为宽度为7.5rem时宽度占满屏幕，如图：虽然效果其是一样的，但显示只有375px，跟设计稿的750px不一样，虽然只是简单的乘除，每次计算的话还是比较麻烦，有没有什么好的解决办法？答案是肯定的。

①：删除设置viewport的meta

②：添加fixPixelRatio方法动态设置viewport

③：为了容易区分，我们把将设置font-size的匿名函数也写成普通方法，两个方法如下，具体使用方法请看文章最后的测试代码。

    function fixPixelRatio () {
      var scale = 1 / window.devicePixelRatio;
      var meta= '';
      document.write(meta);
    }
    function displayRem () {
      var designW = 750;  //设计稿宽
      var font_rate = 100;
      //适配
      document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
      document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
      //监测窗口大小变化
      window.addEventListener("orientationchange" in window ? "orientationchange" : "resize", function () {
          document.getElementsByTagName("html")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
          document.getElementsByTagName("body")[0].style.fontSize = document.body.offsetWidth / designW * font_rate + "px";
      }, false);
    }

以上方案测试代码

新建html文件，复制代码过去，保存，浏览器打开，切换手机模式查看即可。

  
  
  
  
  
  
    
Only test