css3vw适配_小tips：使用rem+vw实现简单的移动端适配

首先设置meta属性，如下代码：

使用如下代码就能实现移动端的适配：

html {

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

100vw相当于浏览器的window.innerWidth，是浏览器的内部宽度，注意，滚动条宽度也计算在内！那么1vw就是表示1%的屏幕宽度。

其中的13.33333333vw是怎么来的呢？就是你的设计稿是750px，那么设计稿的1px就是0.133333333vw，那么100px就是13.33333333vw。也即是html的font-size设置为100px相当于1rem(设计稿为750px)。那么我们就可以很轻松的换算设计稿中的单位为rem了，比如一个元素宽度为150px，转换为rem就是1.5rem。其他尺寸设计稿的计算方式依次类推。

参考网易新闻移动端的写法：

/**

* view-port list:

320x480

320x568

320x570

360x592

360x598

360x604

360x640

360x720

375x667

375x812

393x699

412x732

414x736

480x854

540x960

640x360

720x1184

720x1280

800x600

1024x768

1080x1812

1080x1920

*/

html {

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

@media screen and (max-width: 320px) {

html {

font-size: 42.667px;

font-size: -webkit-calc(13.33333333vw);

font-size: calc(13.33333333vw);

}

}

@media screen and (min-width: 321p