CSS vw vh详解

简介

• 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;
}

• 提醒 开发中不要vw与vh混用
• 全面屏视口高度尺寸大，如果混用可能会导致盒子变形

.box {
    // 68  vw * 29 vh  不推荐
   width: (68 / 3.75vw);
   height: (29 / 6.67vh);
   background-color: pink;
}