自适应单位

1.淘宝手机端弹性布局方案 lib-flexible

2.通过js计算，每次刷新窗口或者窗口尺寸发生变化就重新计算rem

3.使用css的media媒体查询交融不同设备尺寸，设置不同的跟元素大小

//按照宽度375图算， 1rem = 100px;
(function (window, document) {
    var getRem = function(){
        if(document){
            var html = document.documentElement;
            var hWidth = (html.getBoundingClientRect().width)*(750 / 352);
            html.style.fontsize = hWidth / 16 + 'px';
        }
    }
    getRem();
    window.onresize = function(){
        getRem();
    }
})(window, document);

/* 响应式 */
@media screen and (max-width: 320px) {
  html {
    font-size: 35.33333333px;
  }
}

@media screen and (min-width:321px) and (max-width: 360px) {
  html {
    font-size: 96px;
  }
}
...

 

375的设计图

指定：1rem = 100px

dWidth：设计稿宽 = 375

vWidth：可视窗口宽【常见尺寸：<320，320,360,375，393，412，414，480，540，640，720，768，852，992，1200，>1200】

font-size = （vWidth/375）*100+‘px’

body的宽：375px/100px = 3.75rem

 

iphone6（375）：font-size=(375/375)*100+'px' = 100px

iphone6 Plus：font-size=(414/375)*100+'px' = 100.4px

100.4 * 3.75 = 414px

 

750的设计图

指定：1rem = 100px

dWidth：设计稿宽 = 750

vWidth：可视窗口宽【常见尺寸：<320，320,360,375，393，412，414，480，540，640，720，768，852，992，1200，>1200】

font-size = （vWidth/375）*100+‘px’

body的宽：750px/100px = 7.5rem

 

iphone6（375）2倍：font-size=(750/750)*100+'px' = 100px

iphone6 Plus 2倍：font-size=(828/750)*100+'px' = 110.4px

110.4 * 7.5= 828px

 

flexible.js

iphone6 2倍图为基准尺寸

750分为100份   750/100 = 7.5px

1份为一个a ， a=7.5px

1rem = 10a

1rem = 10*7.5 = 75px

body宽：750/75 body { width: 10rem }