Web移动端布局

说到移动端，不得不提适配问题，因为现如今市面上移动设备的分辨率大小不同，显然咱们常用的px单位在这个时候就有些不太灵光了，为此，css3出了一个新单位——rem，rem是移动端神器，它完美解决了分辨率的适配问题。

rem是根据HTML根目录font-size的大小为基准

<meta name="viewport" content="width=device-width,Initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no"/>

用JS获得当前屏幕的分辨率，然后动态的给HTML

    (function (doc, win) {      
        var docEl = doc.documentElement,      
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',      
        recalc = function () {        
            var clientWidth = docEl.clientWidth;        
            if (!clientWidth) return;        
            docEl.style.fontSize = 100 * (clientWidth / 750) + 'px';      
        };          
        if (!doc.addEventListener) return;         
        win.addEventListener(resizeEvt, recalc, false);         
        doc.addEventListener('DOMContentLoaded', recalc, false);  
    })(document, window); 

 

转载于:https://www.cnblogs.com/xiaoliwang/p/8354582.html