手機端頁面自適應(yīng)解決方案—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樣式就設(shè)置成了
position: relative;
width: 100%;
max-width: 640px;
min-width: 320px;
margin: 0 auto;

xuanp

rem布局中，如果有個元素需要水平居中固定到頁面底部，你會怎么設(shè)置它的樣式呢。
我是這樣做的，前提是這個元素還是在前面說的最外層水平居中的大div中，樣式如下
position: fixed;
bottom: 0;
z-index: 100;
width: 100%;
max-width: 640px;
min-width: 320px;

xuanp

比較常用的REM適配函數(shù)

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) 奇數(shù)
p:nth-child(even) 偶數(shù)