首先说一个不离题的题外话，上周末的时候在公司加班，是一个移动端的活动页，遇到一个问题。

页面一开始采用是这一段：

同事扒来的,总之原理是改变meta标签里的intial-scale来进行整个画布的缩放。

之前有两个项目都用过适用，所以我也没多想就直接加上去了。

其实还是各种美好，知道遇到了升级版本为9.3的iphone中的微信内置浏览器，当intial-scale不是1，滑屏时会整个页面左右移动。然后我正好有一个左右移动的类轮播，于是体验就不好了。最后查到是intial-scale的问题后，果断放弃这一大段代码，重新加了几句调整html的根字体大小：

但是淘宝其实采用的就是以上做法，并没有出现上述问题，记在这里，后续研究更新。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>

    	  //重置html字体大小

	      var _resize = function(){

	        var html = document.documentElement,

	          w = html.clientWidth/640, w =16*w;

	        html.setAttribute('style', 'font-size:' + w + 'px');

	      }

	      _resize();

	      window.addEventListener('resize', _resize);

</script>

这样的目的其实一样达到了，而且微信也美好了。

sass只需要设置:

1
2
3
$fontRem: 16px;

@function rem($px) { @return $px / $fontRem * 1rem; }

就可以很方便的使用啦。

好了，说完入场就可以进入正题，开始总结啦~

1.为什么用rem

rem就是一个相对于根元素的字体大小的单位，还有一个跟它挺像的em，em是相对于父元素字体大小的单位，所以，一个页面根元素的字体大小是固定的，但是每一个元素它的父元素字体大小却不一定都一样，因此更推荐使用rem。

所以，改变html的根元素大小，整个页面的尺寸也会相应的改变，那么我们根据屏幕尺寸和html根元素比例，就可以做到适应屏幕的大小了。

那么这个比例怎么算的，这就要看设计稿了，加入设计稿是640px，那么遇到640px的屏幕宽，比例就是1…以此类推

所以上面的js其实就是动态来根据比例设置根元素的字体大小，默认设计稿为640，比例为w = html.clientWidth/640;,然后定一个基数，为16px，所有有w=16*w;html.setAttribute('style', 'font-size:' + w + 'px');

2.所有单位需统一

有一个bug是，某次设置了一个块级元素的height：4rem；然后没有设置宽度，那么宽度就是默认的100%。

这样的话实际缩放是没有等比例缩放的，在某些分辨率下会出现错位。所以使用rem缩放的话，一定要记得宽高都需要设置好。

贴一个自己最近做的项目例子吧:smartphoneM端频道页)