移动Web——vw

vw移动适配

效果：当手机屏幕的尺寸发生变化的时候，网页元素的宽高都要等比例变化

• 相对单位
• 相对视口的尺寸计算结果
• vw：viewport width
  • 1vw = 1 / 100视口宽度
• vh：viewport height
  • 1vh = 1 / 100视口高度

vw布局

1.确定设计稿对应的vw尺寸（1/100视口宽度）

• 查看设计稿宽度---> 确定参考设备宽度（视口宽度） ---> 确定vw尺寸（1/100 视口宽度）

2.vw单位的尺寸=px单位数值 / （1/100视口宽度）

 demo.less

// .box {
//   width: (68 / 3.75vw);
//   height: (29 / 3.75vw);
//   background-color: pink;
// }

.box {
  width: (68 / 6.67vh);
  height: (29 / 6.67vh);
  background-color: green;
}

// px单位尺寸 / 1/100视口的宽度或高度

vh单位问题

开发中，能不能vw和vh混用？

• 不能
• vh是1/100视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形

demo.less

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