1.rem

rem 就是根据网页根元素「html」来设置字体大小

这有什么用呢？这是移动 webapp 的最佳的适配方案「目前来说」，既然说是最佳的适配方案，那肯定还有别的适配方案，先看看都有那些适配方案吧

1、viewport缩放「被废弃了」2、宽度固定两边留白「体验很差」3、响应式布局「工作量太大，针对不同的分辨率各写一套 」

2、如何适配

动态的修改 font-size 使用 rem 就可以适配多种手机

(1)通过 media query 来设置 font-size

html { font-size : 20px; } @media only screen and (min-width: 401px){ html { font-size: 25px !important; } } @media only screen and (min-width: 450px){ html { font-size: 26.75px !important; } }

(2) 通过js设置

不同的手机如Android机型太多，写这么多媒介岂不是累死人了...

rem的计算方法:  

rem = 需要转化的px/rem基准值

rem 基准值「和 html 的 font-size 有关」如何算，这里给出一个比较常见的做法，就是用设计稿的屏幕宽度/10 ,原则上除以多少都可以，除以 10 是为了好除「业界基本上也是这样做的」，比如以 iPhone 6p「414*736」 为例子，那么 rem 的基准值就是 414/10 = 41.4px,然后我们就是要不停的改变这个页面基准值的值即可,我们只要记住一点，rem 的基准值是根据设计稿来决定的

使用sass 来转化 px--rem ，并且使用 js 动态设置 font-size：

a、提供 px2rem() 函数

@function px2rem($px){ // rem基准值 $rem : 41.4px; @return ($px/$rem) + rem; } .box{ background-color: red; width: px2rem(100px); height: px2rem(100px); display: flex; justify-content: center; align-items: center; } .item { background-color: yellow; width:px2rem(50px); height:px2rem(50px); }

b. 使用 js 动态的修改 font-size 的值

// 取得屏幕宽度 var devicewidth = document.documentElement.clientWidth || document.body.clientWidth //动态设置 html font-size 值 document.getElementsByTagName('html')[0].style.fontSize = devicewidth / 10 + 'px'; // 窗口大小改变时的回调 window.onresize = function(){ // 取得屏幕宽度 var devicewidth = document.documentElement.clientWidth || document.body.clientWidth //动态设置 html font-size 值 document.getElementsByTagName('html')[0].style.fontSize = devicewidth / 10 + 'px'; }