移动端rem适配

var rem = {  baseRem: 40,  // 基准字号，按照iphone6应该为20，此处扩大2倍，便于计算  baseWidth: 750,  // 基准尺寸宽，此处是按照ihpone6的尺寸  rootEle: document.getElementsByTagName("html")[0],  initHandle: function() {    this.setRemHandle();    this.resizeHandle();  },  setRemHandle: function() {    var clientWidth = document.documentElement.clientWidth || document.body.clientWidth;    this.rootEle.style.fontSize = clientWidth * this.baseRem / this.baseWidth + "px";  },  resizeHandle: function() {    var that = this;    window.addEventListener("resize",    function() {      setTimeout(function() {        that.setRemHandle();      },      300);    });  }};rem.initHandle();

三：多屏适配布局问题

出处：【原创】移动端高清、多屏适配方案

再谈移动端适配和点5像素的由来

使用相对单位：rem

原理：针对不同手机屏幕尺寸和dpr动态的改变根节点html的font-size大小(基准值)。

任意浏览器的默认字体高都是16px。所有未经调整的浏览器都符合: 1rem=16px。那么12px=0.75rem,10px=0.625rem。为了简化font-size的换算，需要在css中的html选择器中声明font-size=62.5%，这就使rem值变为 16px62.5%=10px, 这样12px=1.2rem, 10px=1rem, 也就是说只需要将原来的px数值除以10，然后换上rem作为单位就行了。*

当我们在根节点<html>上设置了font-size基准值以后，在文档中有使用rem单位的属性值都是相对于根节点font-size的一个相对值。比如说一些元素的属性如width,height,margin等。也正是这个原因，现在很多网站的移动端网站都在使用rem单位作为适配工具。

注意事项：

1.整体的布局还是使用百分比

2.使用rem的最佳场景是,遇到例如多列带有图片的列表,常常需要图片固定宽高比

3.研究了一些网站，比如淘宝，对字体字体一般情况建议使用px

4.出现1px像素线的地方，仍旧使用border-width:1px;而不是border-width:.1rem

/**   * [以iPhone6的设计稿为例js动态设置文档 rem 值]   * @param  {[type]} currClientWidth [当前客户端的宽度]   * @param  {[type]} fontValue [计算后的 fontvalue值]   * @return {[type]}     [description]   */  <script>      var currClientWidth, fontValue,originWidth;      //originWidth用来设置设计稿原型的屏幕宽度（这里是以Iphone 6为原型的设计稿）     originWidth=375;     __resize();      //注册 resize事件     window.addEventListener('resize', __resize, false);      function __resize() {         currClientWidth = document.documentElement.clientWidth;         //这里是设置屏幕的最大和最小值时候给一个默认值         if (currClientWidth > 640) currClientWidth = 640;         if (currClientWidth < 320) currClientWidth = 320;         //         fontValue = ((62.5 * currClientWidth) /originWidth).toFixed(2);         document.documentElement.style.fontSize = fontValue + '%';     }     </script>

文章转载于:https://www.jianshu.com/p/e2c0afb2a73f

原著是一个有趣的人,若有侵权,请通知删除

本博客所有文章如无特别注明均为原创。
复制或转载请以超链接形式注明转自起风了，原文地址《移动端rem适配》