简介
- vw vh是一种相对单位
- 相对视口的宽度计算结果
- vw viewport width 1vw=1/100视口宽度
- vh viewport height 1vh=1/100视口高度
适配原理
- 1、确定设计稿对应的vw或vh尺寸 (1/视口宽度或高度) 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)
- 2、vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
- vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )
//转vw
.box{
width: (68 / 3.75vw);
height: (29 / 3.75vw);
background-color: pink;
}
//转vh
.box1{
width: (68 / 6.67vh);
height: (29 / 6.67vh);
background-color: red;
}
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/eb9e34799714d3ee60d68cd694eedc92.png)
- 提醒 开发中不要vw与vh混用
- 全面屏视口高度尺寸大,如果混用可能会导致盒子变形
.box {
// 68 vw * 29 vh 不推荐
width: (68 / 3.75vw);
height: (29 / 6.67vh);
background-color: pink;
}