视口单位以及适配
# 什么是视口单位
- css3 中新增加了一种单位是
vw,vw。这个单位号称是视口单位- 无论是哪一层标签来设置此单位，都是对于浏览器的视口而言的。
- 视口单位 最大为 100vw。 相当于把整个浏览器的宽度分为 100 份
<style>
.block {
width: 6vw;
height: 5vh;
background: red;
}
</style>
<body>
<div class="block"></div>
</body>
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10
- 上述实例中 设备型号是：
iPhone6/7/8 - 设备视口宽度是 375px. 如果用 100vw 来换算的话，就是 1vw === 3.75px
- 那么上述 6vw 的宽度通过计算后实际是 22.5px
# 如何结合 vw/ rem 做移动端适配
- 我们以经典的 Iphone 系列的宽度为例。 iPhone 系列设备中大部分设备分辨率都是 750(物理像素是 750px) 的，但是视口宽度(css 像素)是 375px
- 按照上述实例中 其实我们 1px(css 像素) 会被解析为 2 个物理像素
- 所以我们的 UI 设计图一般都是 750px 像素。或是更高的 375px 的倍数
接下来以实例为例。设备的真实宽度是 750px，我们使用视口单位来计算。就是 100 / 750 = 0.1333333vw
<style>
html,
body {
margin: 0;
padding: 0;
}
html {
font-size: 6.66666vw; // * 50
}
.block {
width: 0.96rem;
height: 0.96rem;
background: red;
}
</style>
<div class="block"></div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
- html 单位
rem主要是依赖于根标签的 font-size 大小。例如：根标签的 font-size: 20px; 那么子元素的一个 rem 单位转换为就是 20px - 之前算出 1px/ 1vw 的比例了，那我们可以以成倍的倍数设置到 html 的 font-size 处。可以是 50 倍数/ 可以是 100 倍数
- 那么实际的元素大小 设置 rem 的时候，也需要按照设计图的实际 px 像素 / 50 或者 100 就可以了