[移动端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-width: 320px) {
     html {
         font-size:100px*(320/$sjt_whdth) ;

     }
 }

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

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

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

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

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

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

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