移动web第六天

移动适配

vw / vh

vw是相对单位, 相对视口的计算结果

vw：viewport width
1vw = 1/100视口宽度
l vh：viewport height
1vh = 1/100视口高度

vw单位尺寸

1. 确定设计稿对应的vw尺寸 （1/100视口宽度）
   查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 （1/100 视口宽度）
2. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )

vh单位尺寸

1. 确定设计稿对应的vh尺寸 （1/100视口高度）
   查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 （1/100 视口高度）
2. vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )

开发中vw和vh不会混用, 如果混用会导致盒子变形

rem 和 vw / vh 的区别

rem在目前市场比较常见:

1. 需要不断修改html文字大小
2. 需要媒体查询media
3. 需要 flexible.js

vw / vh
是将来的趋势, 使用无需各种判断修改