vw 实现移动端布局

一、rem + vw 适配 相对于视口的单位

1vw = 当前浏览器窗口的百分之一
100vw = 100%的宽度
没有滚动条的时候,两者是相等的
滚动条是占位置,100%的宽度是不包含滚动条的 两者是不相等的

推算:

在移动端中 100vw 相当于沾满整个浏览器
拿到ui设计图 1vw 等于设计图的百分之一
100vw / 设计图的大小 = 每一份的大小
量出设计图的某个盒子元素

vw 实现移动端布局思路

100vw 相当于和 ui 设计图的大小是一样的

1vw 就是设计图的百分之一

100vw / 设计图的大小 = 每一份大小

得到的每一份是 px 单位 如何把像素转换为 rem

在工作中写项目的时候，无论用哪种方法都要考虑

设备像素比 dpr = 物理像素 / 逻辑像素

设计图为 640px

dpr=2

640px / 2 = 320px

320px = 100vw

1vw = 3.2px

1px = 0.3125vw

推算过程：

html {font-size:0.3125vw} 计算：物理像素 / 2 = ? rem

优化
计算：1px = 1rem

html {font-size:0.625vw}

设计图为 750px

html {font-size:0.2667vw} 计算：物理像素 / 2 = ? rem

优化：
计算：1px = 1rem

html {font-size:0.5334vw}

设计图为 1080px

html {font-size:0.2777vw} 计算：物理像素 / 2 = ? rem

优化：
计算：1px = 1rem

html {font-size:0.5556vw}