用rem来做响应式开发

我们现在在切页面布局的使用常用的单位是px，这是一个绝对单位，移动端屏幕尺寸很多，一般设计图都是按750px来设计，

rem（font size of the root element）是指相对于根元素的字体大小的单位。简单的说它就是一个相对单位

em（font size of the element）是指相对于父元素的字体大小的单位。它们之间其实很相似，只不过一个计算的规则是依赖根元素一个是依赖父元素计算。

上面说过rem是通过根元素进行适配的，网页中的根元素指的是html我们通过设置html的字体大小就可以控制rem的大小。

如下，通过改变根元素的单位就可以适配不同宽度屏幕：

1 html{
2     font-size:62.5%; /* 10÷16=62.5% */
3 }
4 body{
5     font-size:1.2rem ; /* 12÷10=1.2 */
6 }
7 p{
8     font-size:1.4rem;
9 }

这里我是通过设置如下的代码来控制不同设备下的字体大小显示使其达到自适应

 1 html {
 2     font-size: 62.5%;
 3 }
 4 @media only screen and (min- 320px){
 5     html {
 6         font-size: 94%!important;
 7     }
 8 }
 9 @media only screen and (min- 375px){
10     html {
11         font-size: 109%!important;
12     }
13 }
14 @media only screen and (min- 414px){
15     html {
16         font-size: 125%!important;
17     }
18 }

也可以使用js控制不同的设备宽度在根元素上设置不同的字体大小（1rem为1/10屏幕宽度）：

 1 ;
 2 (function(win) {
 3     var doc = win.document;
 4     var docEl = doc.documentElement;
 5     var tid;
 6 
 7     function refreshRem() {
 8         var width = docEl.getBoundingClientRect().width;
 9         if (width > 540) { // 最大宽度
10             width = 540;
11         }
12         var rem = width / 10; // 将屏幕宽度分成10份， 1份为1rem
13         docEl.style.fontSize = rem + 'px';
14     }
15 
16     win.addEventListener('resize', function() {
17         clearTimeout(tid);
18         tid = setTimeout(refreshRem, 300);
19     }, false);
20     win.addEventListener('pageshow', function(e) {
21         if (e.persisted) {
22             clearTimeout(tid);
23             tid = setTimeout(refreshRem, 300);
24         }
25     }, false);
26 
27     refreshRem();
28 
29 })(window);

在使用一些框架的时候，可以加入以下代码，强制浏览器使用Webkit内核，国内很多的主流浏览器都是双核浏览器：

1 <meta name="renderer" content="webkit">

好好学习，天天向上，有错欢迎指正！