一、VW / Vh

• 一种逐渐成为主流的适配方案

1.vw单位

• [Viewport width]
• 相对单位
• 相对于当前视口的宽度计算
• 1vw = 1/100视口宽度
• 例如: 视口宽度为375px时, 1vw = 3.75px

2.vh单位

• [Viewport height]
• 相对单位
• 相对于当前视口的高度计算
• 1vh = 1/100视口高度
• 例如: 视口高度为667px时, 1vh = 6.67px

3.vw和vh总结

1. vw: 相对于视口宽度来计算, 默认1vw = 1/100的视口宽度, 用来定义元素时, 不会随着父容器宽度的变化而变化；
2. vh: 相对于视口高度来计算, 默认1vh = 1/100的视口高度, 用来定义元素时, 不会随着父容器高度的变化而变化；
3. 百分比: 大多数下情况是相对于父容器的大小来计算的, 会随着父容器的大小变化而变化；
4. 

4.vw与rem的对比

• Vw因为适配简单, 所以如果是新项目需要实现适配, 可以采用Vw方案
• 适配并不只是移动适配, PC端的中屏到超大屏也可以用到适配手段

5.Vmin和Vmax

• vmax： 当前视口的宽度和高度中, 最大的那个值
• vmin： 当前视口的宽度和高度中, 最小的那个值
• 例如: 375px和667px的iPhone6/7/8/视口下:
• 1vw = 3.75px | 1vmin = 3.75px
• 把设备横屏展示时:
• 1vw = 6.67px | 1vmin = 3.75px
• vmin和vmax和vw的适配原理一致, 都可以用于移动适配方案
• 需要兼容平板设备或者兼容横屏预览时, 可考虑使用vmin单位
• 不需要兼容横屏预览时, 直接使用vw单位

二、响应式

移动适配各类方案对比

• rem方案

1. PC端一套代码
2. 单独为移动端写一套代码

• vw方案

1. PC端一套代码
2. 单独为移动端写一套代码

• 响应式

1. PC端和移动端是同一套代码

响应式介绍

• PC端和移动端用的是同一套代码, 通过媒体查询技术实现网页内容在不同屏幕尺寸 [超大屏 大屏 中屏 小屏 超小屏等] 下的合理展示
• 使用一套代码快捷的实现了多个屏幕的适配, 不必单独为了移动端订制

缺点：

• 在书写页面时,需要根据多套不同尺寸的Ui设计稿去完成不同的内容展示
• 代码繁多, 同一时间, 只能展示一套代码, 其他代码都用不上
• 想让每个尺寸都合理展示, 也代表每个尺寸的设计都不完美, 属于一种折中的适配方案
• 通常只能用于偏简单的门户网站, 不太适合网页元素稍复杂的网站