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日