网页适配：vw vh单位与响应式布局实践.pdfVIP

长度单位

01

•rem

•vw/vh

vw/vh

目标：能够使用vw单位设置网页元素的尺寸

⚫相对单位

⚫相对视口的尺寸计算结果

⚫vw：viewportwidth

➢1vw=1/100视口宽度

⚫vh：viewportheight

➢1vh=1/100视口高度

vw适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

⚫vw单位尺寸

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

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

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

vh适配原理

目标：实现在不同宽度的设备中，网页元素尺寸等比缩放效果

⚫vh单位尺寸

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

➢查看设计稿宽度→确定参