第一种采用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
<script>
document.documentElement.style.fontSize = document.documentElement.clientWidth / 640*100 +'px';
</script>
问题：为什么要设置Html的font-size？
答： 其实跟@media的逻辑是一模一样, 只是一种用css控制rem单位, 一种用js控制rem单位, 换算的逻辑都一样;
- 是因为这里是作为一个基础数值，换一个方向去想，这里先不乘以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，该方案自动帮你设置）
<script>!function(e){function t(a){if(i[a])return i[a].exports;var n=i[a]={exports:{},id:a,loaded:!1};return e[a].call(n.exports,n,n.exports,t),n.loaded=!0,n.exports}var i={};return t.m=e,t.c=i,t.p="",t(0)}([function(e,t){"use strict";Object.defineProperty(t,"__esModule",{value:!0});var i=window;t["default"]=i.flex=function(e,t){var a=e||100,n=t||1,r=i.document,o=navigator.userAgent,d=o.match(/Android[\S\s]+AppleWebkit\/(\d{3})/i),l=o.match(/U3\/((\d+|\.){5,})/i),c=l&&parseInt(l[1].split(".").join(""),10)>=80,p=navigator.appVersion.match(/(iphone|ipad|ipod)/gi),s=i.devicePixelRatio||1;p||d&&d[1]>534||c||(s=1);var u=1/s,m=r.querySelector('meta[name="viewport"]');m||(m=r.createElement("meta"),m.setAttribute("name","viewport"),r.head.appendChild(m)),m.setAttribute("content","width=device-width,user-scalable=no,initial-scale="+u+",maximum-scale="+u+",minimum-scale="+u),r.documentElement.style.fontSize=a/2*s*n+"px"},e.exports=t["default"]}]); flex(100, 1);</script>
// 來源：简书 / AkiraSun
// 链接：https://www.jianshu.com/p/e96ccb603a50
此方案也是默认 1rem = 100px，所以你布局的时候，完全可以按照设计师给你的效果图写各种尺寸啦.
- 优点: 屏幕越大，像素越高，看到的应用越多
