一、移动适配
1.长度单位 vw / vh
能够使用vw单位设置网页元素的尺寸 相对单位 1. 相对视口的尺寸计算结果 2. vw:viewport width 1vw = 1/100视口宽度 3.vh:viewport height 1vh = 1/100视口高度
2.vw适配原理 实现在不同宽度的设备中,网页元素尺寸等比缩放效果
vw单位尺寸 1. 确定设计稿对应的vw尺寸 (1/100视口宽度) 2. 查看设计稿宽度 → 确定参考设备宽度 (视口宽度) → 确定vw尺寸 (1/100 视口宽度) 3. vw单位的尺寸 = px单位数值 / ( 1/100 视口宽度 )
3.vh适配原理 实现在不同宽度的设备中,网页元素尺寸等比缩放效果
- vh单位尺寸
- 确定设计稿对应的vh尺寸 (1/100视口高度) a 查看设计稿宽度 → 确定参考设备高度 (视口高度) → 确定vh尺寸 (1/100 视口高度)
- vh单位的尺寸 = px单位数值 / ( 1/100 视口高度 )