使用 rem，实现屏幕自适应

实现屏幕自适应

1. 先获得屏幕宽度
2. 根据屏幕宽度计算出 font-size
3. 接着写代码时候，代码大小单位使用 rem。 1rem = 10px
4. 然后就没了

上代码

// 使得打开网页时rem的设置更及时,并实时跟踪屏幕宽度变化
(function(doc, win) {
    setRem();
    var resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function() {
            setRem();
        };
    if (!doc.addEventListener)
        return;
    win.addEventListener(resizeEvt, recalc, false);
    // doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
 
function setRem() {
    var docEl = document.documentElement;
    var clientWidth = docEl.clientWidth;
    if (!clientWidth) {
        return;
    }
    docEl.style.fontSize = 100 * (clientWidth / 1080) + 'px';
}

可提前统计自己网站有哪些主流的屏幕设备，然后去针对那些设备去做media query设置也可以实现适配，如下

 html {
 
    font-size : 20px;
 
}
 
@media only screen and (min-width: 401px){
 
    html {
 
        font-size: 25px !important;
 
    }
 
}
 
@media only screen and (min-width: 428px){
 
    html {
 
        font-size: 26.75px !important;
 
    }
 
}
 
@media only screen and (min-width: 481px){
 
    html {
 
        font-size: 30px !important;
 
    }
 
}
 
@media only screen and (min-width: 569px){
 
    html {
 
        font-size: 35px !important;
 
    }
 
}
 
@media only screen and (min-width: 641px){
 
    html {
 
        font-size: 40px !important;
 
    }
 
}