CSS新视口单位

自2012年以来，我们一直在使用CSS视口单位。我们可以用它根据视口宽度和高度来调整元素大小。 然而，vh在移动端上属实有点鸡肋，因为vh不包含浏览器的导航栏高度。

为了应对这个问题，我们现在有了新的视口单位。

旧视口单位：vh,vw,vmin,vmax,vi,vb

vh和vw各自表示屏幕宽高的几分之几，如50vw就是50%屏幕宽度

vmin和vmax表示屏幕的宽和高两个中的最小值，最大值

vi,vb 表示的是视口内联和视口块的单元,默认情况下与vh,vw赋值行为相同

当 css 使用 writing-mode改变元素书写方式,vi,vb的赋值行为会发生改变

新视口单位：sv,lv,dv三种前缀，他们分别代表小视口、大视口和动态视口

The large viewport units（大视口单位）：lvw,lvh, lvi, lvb, lvmin, and lvmax

The small viewport units（小视口单位）：svw, svh, svi, svb, svmin, and svmax

The dynamic viewport units（动态视口单位）：dvw, dvh, dvi, dvb, dvmin, and dvma

大视口单位的前缀是 lv，意为 large viewport

小视口单位的前缀是 sv，意为 small viewport

动态视口单位的前缀是 dv，意为 dynamic viewport

sv表示地址栏UI未缩小尺寸时的视口高度

lv表示UI缩小尺寸后的视口高度

dv对标vmin,vmax等动态单位，比较好理解

动态视口的单位是动态的，会影响页面的性能，因为浏览器需要花费时间来重新计算用户向上或向下滚动的样式

新视口单位不仅可以用在移动端，也可以用在TV和PC上