【Mobile】Chapter6-bilibili 项目

站在巨人的肩膀上

黑马程序员pink老师前端入门教程，零基础必看的h5(html5)+css3+移动端前端视频教程

MurphyChen’s Notes

（五）bilibili 项目

1. vw 介绍

1.1 vw/vh

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

• 相对单位。
• 相对视口的尺寸计算结果。
• vw：viewport width
  • 1vw = 1/100 视口宽度
• vh：viewport height
  • 1vh = 1/100 视口高度

1.2 vw 适配原理

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

不管在什么屏幕下，我们把屏幕分为平均的 100 等份。

1vw = 1/100 屏幕宽度。

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

开发中，vw 和 vh 不会混用。因为 vh 是 1/100 视口高度，全面屏视口高度尺寸大，如果混用可能会导致盒子变形。

1vw 和 1% 的区别：

• vw 永远是以视口的宽度为准。在 375 设计稿下，1vw 永远是 3.75px。
• 百分比以父盒子为准。假如父盒子是 200px，则 1% 是 2px。

1.3 px 如何转为 vw

我们的设计稿是 iPhone 678，是 375px，vw 把屏幕划分了 100 等份，则 1vw = 3.75px。

如果有一个盒子是 68px * 29px，则我们在 less 下写为：

width: (68 / 3.75vw);
height: (29 / 3.75vw);

1.4 vw/vh 和 vmin/vmax

• vmin 可以照顾手机端横屏和竖屏的显示效果。

vw/vh：vh 和 vw 与视口的高度和宽度有关。1 vw 就是视口的宽度的 1%。

vmin/vmax：vmin 和 vmax 是与当下屏幕的宽度和高度的最大值或最小值有关。取决于哪个更大和更小。