移动端布局

1. rem + vw 移动端自适应大小

rem 中的r可以看成root根元素，rem就是基于css中的 html{ font-size: 10px; } 里面的font-size 而来的单位。
1rem = 1*10px = 10px

vw 是浏览器视口宽度，1vw 的意思就是当期设备view(视口)weight(宽度)的1%

假如设计图中设备为750px宽， 如果想让一个宽高36px的图片，用rem表示的话，html的font-size设置为10px或者100px比较好算；当 html{ font-size: 10px; } ，图片宽高就是3.6rem；

但是小屏也有很多尺寸，设计图只有一种，自适应屏幕宽度就不能把font-size写死，所以10px可以换种写法，如下:
先看占比：10/750 = 0.0133 (10px占屏幕宽度750px比例)，也就是占我们屏幕宽度的1.33%；刚好1vw可以表示1%，那么1.33%就可以写成1.33vw；
也就是说 font-size的10px直接写成1.33333333333333333333vw。
再验证下:
1.33333333333333333333vw * 750px =1.33333333333333333333 * 1% * 750px = 9.99999999999px ≈ 10px；

因此html { font-size = 1.3333333333333333333333vw}，图片宽高依然表示为3.6rem;

这样，页面就可以随着屏幕放大缩小而自动等比放缩了。

也可以用如下的js方法自适应:

2. @media 媒体查询

一般网站的首页都会有四类: pc端、便携端、平板端、移动端页面设计，这个时候我们就要写四套不同的css样式来匹配页面了。
示例:

3. rem vw cale() 上面的优化版

html {
    font-size: 16px;
}
@media screen and (min-width: 375px) {
    html {
        /* 375px作为16px基准，414px宽度时正好对应18px的根字号大小 */
        font-size: calc(16px + 2 * (100vw - 375px) / 39);
    }
}

计算公式:
设计页面比例： (24-16)size / (800-400)px= … size / px
实际设备尺寸与设计页面差：100vw-400px= … px
两个一乘结果 就是要额外加上的字体size