[移动端WEB] 移动端网站响应式布局之"rem"，CSS3 rem使用方式

(function(doc, win) {

                var docEl = doc.documentElement,
                    resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
                    recalc = function() {
                        var clientWidth = docEl.clientWidth;
                        if(!clientWidth) return;
                        //                        if(clientWidth>=640){
                        //                            docEl.style.fontSize = '100px';
                        //                        }else{
                        //                            docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                        //                        }
                        docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
                    };

                if(!doc.addEventListener) return;
                win.addEventListener(resizeEvt, recalc, false);
                doc.addEventListener('DOMContentLoaded', recalc, false);
            })(document, window);

1.根据设计图的大小修改图中的值。当前为 640 ，然后使用的rem值就为设计图的值/100为rem的值

当然也可以用媒体查询当然有点复杂

$sjt_whdth:640;

@media (min- 320px) {
    html {
        font-size:100px*(320/$sjt_whdth) ;
        
    }
}

@media (min- 360px) {
    html {
        font-size: 100px*(360/$sjt_whdth);
    }
}

@media (min- 375px) {
    html {
        font-size: 100px*(375/$sjt_whdth) ;
    }
}

@media (min- 414px) {
    html {
        font-size: 100px*(414/$sjt_whdth) ;
    }
}
@media (min- 765px) {
    html {
        font-size: 100px*(765/$sjt_whdth) ;
    }
}

@media (min- 1020px) {
    html {
        font-size: 100px*(1020/$sjt_whdth) ;
    }
}
@media (min- 1280px) {
    html {
        font-size: 100px*(1280/$sjt_whdth) ;
    }
}

@media (min- 1360px) {
    html {
        font-size: 100px*(1360/$sjt_whdth) ;
    }
}
@media (min- 1600px) {
    html {
        font-size: 100px*(1600/$sjt_whdth) ;
    }
}
@media (min- 1920px) {
    html {
        font-size: 100px*(1920/$sjt_whdth) ;
    }
}

1.小编习惯scss写css了所以里面会有算法，实际上是不可以的

2.这里的320px 下的0.5px是什么呢？？  0.5是320/640的值。用当前宽度/设计图宽度 ，其中px只是一个单位