移动端布局（一）

 本篇文章介绍  rem+vw的移动端布局

在介绍这种方法之前，有必要提一下retina屏和dpr

rem:即相对于根元素html中font-size的倍数，因为移动端的分辨率大小不同 有320 有375的；如果我们把font-size写死，比如

font-size=100px;这样的话 我们设置的元素大小在375 的屏幕下，显示的大小合适，但是如果换做320 的屏，由于元素大小不变，

那么在320屏幕下显示则可能会非常别扭，影响用户体验。所以，我们希望元素大小可以随着屏幕大小变化而变化。因此我们使用vw,vw的意思是相对于浏览器窗口的比例，比如 30vw 意思是当前屏幕大小的30%

//首先在头部 加上如下代码 不允许用户自己调整屏幕大小
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

 html{
    font-size:31.25vw;
    /* 31.25vw == 100px   目的：为了给rem提供一个比例 */
    /* 320的设备里面 1rem == 100px */
    
}

如果你是用 vw + 结合 rem 做页面布局适配，记住如下结论即可:

UI设计图为 750px html{font-size:26.67vw}

UI设计图为 640px html{font-size:31.25vw}