谈谈利用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展示效果:

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法_第1张图片

iphone5展示效果:

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法_第2张图片

ipad展示效果:

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法_第3张图片

 

更新:

2018-07-11更新如下:

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

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

谈谈利用JavaScript结合相对单位rem实现自适应布局的简单而实用的方法_第4张图片

①:删除设置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文件,复制代码过去,保存,浏览器打开,切换手机模式查看即可。




  
  
  Document
  
  
  
    
Only test

 

你可能感兴趣的:(JavaScript,前端解决方案)