移动web第六天

移动web第六天

一、vw / vh

1、什么是vw、vh

vw、vh相对单位，相对视口的尺寸计算结果

vw：viewport width

• 1vw = 1/100视口宽度

vh：viewport height

• 1vh = 1/100视口高度

2、vw单位尺寸

• 确定设计稿对应的vw尺寸 (1/100视口宽度)

  查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度)

• vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

3、vh单位尺寸

• 确定设计稿对应的vh尺寸 (1/100视口高度)

  查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)

• vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

4、vw/vh 混用

思考：开发中，会不会vw和vh混用呢?

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