用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-width: 320px){
 5     html {
 6         font-size: 94%!important;
 7     }
 8 }
 9 @media only screen and (min-width: 375px){
10     html {
11         font-size: 109%!important;
12     }
13 }
14 @media only screen and (min-width: 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">

 

 

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