移动端适配

rem适配

1.引入flexible.js (解决不同屏幕设置 html 跟字体为设计稿的 1/10的媒体查询问题)

2.代码实际尺寸为   

(标注尺寸 / 设计稿 / 10 ) rem

eg:  750设计图的 120px

(120 / 750 * 10) rem  =>  (120 / 75) rem

width : 1.6rem;

vw适配

1.由于视口宽度为100vw,所以1vw占据屏幕宽度的1/100

2.代码实际尺寸为   

(标注尺寸 / 设计稿 / 100 ) rem

eg:  750设计图的 120px

(120 / 750 * 100) rem  =>  (120 / 7.5)vw

width : 16vw;

---

适配示例

//750(设计图宽度) 2(二倍图) 10(rem比例) 100(vw比例)

@scale-rem:750/2/10rem;

@scale-vw:750/2/100vw;

.box {

    width: (80 / @scale-rem);

    height: (80 / @scale-vw);

    background-color: red;

}

愤怒的牛牛的

愤怒的牛牛的新浪博客

愤怒的牛牛的GitHub