手机端页面自适应解决方案—rem布局

xuanp

rem布局非常简单，首页你只需在页面引入这段原生js代码就可以了

1.     (function (doc, win) {
   
2.         var docEl = doc.documentElement,
   
3.             resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
   
4.             recalc = function () {
   
5.                 var clientWidth = docEl.clientWidth;
   
6.                 if (!clientWidth) return;
   
7.                 if(clientWidth>=640){
   
8.                     docEl.style.fontSize = '100px';
   
9.                 }else{
   
10.                     docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
    
11.                 }
    
12.             };
    
13. 
    
14.         if (!doc.addEventListener) return;
    
15.         win.addEventListener(resizeEvt, recalc, false);
    
16.         doc.addEventListener('DOMContentLoaded', recalc, false);
    
17.     })(document, window);

复制代码

xuanp

如果页面的宽度超过了640px，那么页面中html的font-size恒为100px，否则，页面中html的font-size的大小为： 100 * (当前页面宽度 / 640)

xuanp

移动端页面效果图的宽度都定在了640px。于是我在项目中，最外层的div样式就设置成了
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;

xuanp

rem布局中，如果有个元素需要水平居中固定到页面底部，你会怎么设置它的样式呢。
我是这样做的，前提是这个元素还是在前面说的最外层水平居中的大div中，样式如下
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
max-width: 640px;
min-width: 320px;

xuanp

比较常用的REM适配函数

var _htmlFontSize = (function () {
        var clientWidth = document.documentElement ? document.documentElement.clientWidth : document.body.clientWidth;
        //if(clientWidth > 768) clientWidth = 768;
        if (clientWidth > 768 && clientWidth < 1280) {
            clientWidth = 768;
        } else if (clientWidth >= 1280) {
            clientWidth = 512;
        }
        document.documentElement.style.fontSize = clientWidth * 1 / 16 + "px";
        return clientWidth * 1 / 16;
    })();

xuanp

:nth-child(n)
p:nth-child(3n+0)
{
background:#ff0000;
}
p:nth-child(odd) 奇数
p:nth-child(even) 偶数