rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位，即：元素
样式设置了n rem，其实际的像素大小为：n * html.fontSize px
将它应用在移动端时，可以通过修改html的字体大小值，改变页面最终展示的大小。
可以理解为通过改变html的字体大小，就可以缩放页面元素。
以设计稿750*1206为例
假设当屏幕为750*1206时，html字体大小为(750/16)px
当屏幕为375*603时，html字体大小为(375/16)px（即：缩小了一倍）
但是，通常情况下，屏幕大小都不是固定比例的，所以需要进行计算，我的计算方式是将16作为基准，最终以屏幕大小与基准的比值作为当前页面html的字体大小
原理
以750*1206的屏幕（设计稿大小RC）作为标准，默认字体大小为（750/16）
如果是宽屏，则以高来计算html的字体大小基准值(GC为屏幕实际大小,lastSize=16(即标准时html字体的大小基准值))
size = (RC.h / GC.h * GC.w) / RC.w * lastSize;
fontSize = GC.w / size
理解：以高为基准，获取标准高与屏幕高的比例RC.h / GC.h，再通过比例获取到按标准比例的时候，宽度不变，此时的宽理应为多少(RC.h / GC.h * GC.w)，最后通过理应得到的宽与设计的宽的比值(RC.h / GC.h * GC.w) / RC.w来确定此时字体大小基准值size，最终得到的当前屏幕的字体大小为fontSize
如果是长屏，则以标准来计算html的字体大小
可能有人会好奇，为什么只是宽屏稍作调整，而长屏不需要呢？那是因为如果屏幕太宽，还以宽进行适配的话，就会发现页面中的元素要么都挤到一起了，要么部分元素显示不全
完整js代码如下：
var lastSize = 16, // （默认标准的html字体大小的基准值，可以随自己喜好定义，但必须与样式统一）
htmlStatus = 0,
bodyElement = document.documentElement || document.body,
RC = { w:750, h:1206 }, // 标准尺寸，即：设计稿尺寸
GC = {
w:bodyElement.clientWidth,
h:bodyElement.clientHeight
},
rightSize = RC.w / RC.h, // 标准比例
currentSize = GC.w / GC.h,
html = document.getElementsByTagName("html")[0];
if(rightSize > currentSize){ // 长屏
lastHTMLSize = 16;
}else if(rightSize < currentSize){ //宽屏
lastHTMLSize = (RC.h / GC.h * GC.w) / RC.w * 16;
}
html.style.fontSize=GC.w/lastHTMLSize+'px';
以上是所有js代码，为保证效果，最好是添加在html文件的head里
由于使用了rem，所以页面的样式是计算出来的，建议使用sass或less的函数进行计算，
注意：样式文件以设计稿为准
@function rem($n){
@return $n / (750 / 16) + rem
}
以上是最基本的代码，但这还不够，因为你会发现，在宽屏上页面元素可能偏左或偏右，比较零散，所有建议以中心进行适配，即left:50%，添加margin-left值，由于之前的缩放是宽屏按高缩放，长屏或标准屏都按标准缩放，所以不需要担心高的问题，所以高可以放心直接设置top值。
为了方便，以下是个人以中心适配的计算（scss）
@function getTop($n) {
@return ($n - 1206 / 2) / (750 / 16) + rem;
}
@function getLeft($n) {
@return ($n - 750 / 2) / (750 / 16) + rem;
}
@function getRight($n) {
@return (($n - 750) / 2) / (750 / 16) + rem;
}
@mixin center($left,$top) { // 默认以left计算中心的
position:absolute;
left:50%;
top: rem($top);
margin:0 0 0 getLeft($left);
}
@mixin center-right($right,$top) {// 默认以right计算中心的
position:absolute;
right:50%;
top: rem($top);
margin:0 getRight($right) 0 0;
}
@mixin centerb($left,$bottom) {// 默认以left计算中心的,但设置bottom
position:absolute;
left:50%;
bottom: rem($bottom);
margin:0 0 0 getLeft($left);
}
以上即为全部代码，基本上可以适配任何屏幕，包括PC
我是以 750/16 作为标准去计算的值，且以16为基准，但这不是唯一，可以以任何值为标准去计算，但是计算方式都差不多
文档信息
版权声明：自由转载-非商用-非衍生-保持署名
发表日期：2017年2月24日
