本篇文章介绍 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}