开发单位 vmin/vmax

摘要

以前，写过一个仿B站移动端的项目；当时，项目适配用的是 vw，而现在B站移动端适配用的是 vmin，想了解 vmin/vmax 单位的作用，还有为什么B站移动端适配要采用 vmin。

vmin/vmax 概述

• vw：与视口的宽度有关，1vw 就是视口宽度的 1%
• vh：与视口的高度有关，1vh 就是视口高度的 1%
• vmin：与当下视口的宽度和高度的最小值有关，取值为 vw 和 vh 中较小的那个
• vmax：与当下视口的宽度和高度的最大值有关，取值为 vw 和 vh 中较大的那个 

B站移动端适配为什么用 vmin 而不是用 vw ？

vmin 可以照顾移动端（手机端）横屏和竖屏的显示效果，保证移动开发中屏幕 旋转 之后的尺寸不变

• vw 横屏：显示效果不好

• vmin 横屏：显示效果好