2018-07-26 -移动端适配rem的方法

第一种采用css的@media属性

• 设置rem

/*移动端适配 width|height|font-size = 视觉稿量出来的值 / 100rem;@lbl*/
@media screen and (max-width:359px) and (min-width:320px) { html,body{ font-size: 50px !important; }}
@media screen and (max-width:374px) and (min-width:360px) { html,body{ font-size: 56.25px !important; }}
@media screen and (max-width:413px) and (min-width:375px) { html,body{ font-size: 58.5px !important; }}
@media screen and (max-width:639px) and (min-width:414px){ html,body{ font-size: 64.6px !important; }}
@media screen and (min-width:640px) { html,body{ font-size: 100px !important; }} 

• 使用rem单位

// 假设div=50px;
div.style.width= 50/100 rem;

第二种获取通过js设置根元素的字体大小

js方法1 :

• 设置rem

问题：为什么要设置Html的font-size？
答： 其实跟@media的逻辑是一模一样, 只是一种用css控制rem单位, 一种用js控制rem单位, 换算的逻辑都一样;

1. 是因为这里是作为一个基础数值，换一个方向去想，这里先不乘以100以免产生误解。
   例如：设计稿宽度是640px,有一个元素设计稿上的宽度是50px，设备物理宽度是320px，那么根据比率计算出实际涉笔里面宽度是：50*(320/640)=25px；首先这里没有问题，实际上的宽度根据(320/640)这个比率计算出来了是25px，这个(320/640)相当于1rem。

1）为了计算方便，我们后面把比率乘以了100，(320/640)100,那么相对应这个元素在设置数值的时候就需要除以100了，这样可以保证最后出来的数值不变，相对于0.5rem=50（320/640），最终出来的数值一直。
2）一般浏览器的最小字体是12px，如果font-size=（320/640）px，相当于font-size=0.5px,那么这个数值就小于12px，会造成一些计算的错误，和一些奇怪的问题，乘以100后，font-size是50px。

• 使用rem单位计算

    // 假设div=50px;
        div.style.width= 50/100 rem;

js方法2 :

• 设置rem;

  将px替换成rem，动态修改html的font-size适配。它可以很好的根据根元素的字体大小来进行变化，从而达到各种屏幕基本一致的效果体验。
  举例说明，通常font-size的默认值是16px, 那么在320px宽度的屏幕下，得到的换算rem的倍数为320/16=20; 1rem等于16px；

    // 1. 首先确定 html 的默认根元素大小(16px=1rem)
    const htmlDefaultSize = 16px
    // 2. 先根据设计稿尺寸,除以html根据元素大小, 得出rem换算倍数(假设320px设计稿)
    let num = 320px / htmlDefaultSize ;
    // 3. 再获取当前屏幕大小
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    // 4. 针对当前实际的屏幕尺寸 设置根元素字体大小
    let htmlDom = document.getElementsByTagName('html')[0];
    htmlDom.style.fontSize= htmlWidth / num + 'px';  // 根据动态倍数换算设置

• 使用rem单位
  : 用实际的px尺寸, 除以设计稿尺寸对应的根元素默认size即可

        // 假设div=50px, 除以默认根元素尺寸16px,
        // 再乘以当前动态的根元素尺寸(此时的1rem可能等于12px,10px等) 即得出以rem为单位的实际尺寸
        div.style.width= 50/16 rem;    // --> (50 / 16) * 1rem

rem之阿里高清布局方案

这是阿里团队的高清方案布局代码，所谓高清方案就是根据设备屏幕的DPR（设备像素比，又称DPPX，比如dpr=2时，表示1个CSS像素由2个物理像素点组成）** 动态设置 html 的font-size, 同时根据设备DPR调整页面的缩放值，进而达到高清效果**

• 该方案使用相当简单，把下面这段已压缩过的 原生JS（仅1kb） 放到HTML 的 head 标签中即可（注:不要手动设置viewport，该方案自动帮你设置）

// 來源： / AkiraSun
// 链接：https://www.jianshu.com/p/e96ccb603a50

此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦.

• 优点: 屏幕越大，像素越高，看到的应用越多