新的 CSS 视口单位 lvh 和 svh
💡
原文中文，约1700字，阅读约需4分钟。
📝
内容提要
本文介绍了CSS视口的新引入的长度单位，专为适配移动设备的动态工具栏而设计。新的单位包括vw、vh、vi、vb、vmin、vmax、lvw、lvh、lvi、lvb、lvmin、lvmax、svw、svh、svi、svb、svmin、svmax、dvw、dvh、dvi、dvb、dvmin和dvmax。这些单位在Chrome、Safari和Firefox浏览器中得到支持。
🎯
关键要点
- 本文介绍了CSS视口的新引入的长度单位，专为适配移动设备的动态工具栏而设计。
- 新的CSS单位包括vw、vh、vi、vb、vmin、vmax、lvw、lvh、lvi、lvb、lvmin、lvmax、svw、svh、svi、svb、svmin、svmax、dvw、dvh、dvi、dvb、dvmin和dvmax。
- 这些单位在Chrome、Safari和Firefox浏览器中得到支持。
- vw表示视口宽度的1%，vh表示视口高度的1%。
- 使用100vw和100vh可以使元素完全覆盖视口。
- 移动设备的视口大小受动态工具栏的影响，vw和vh单位在这种情况下表现不佳。
- CSS工作组规定了大视口和小视口的状态，以适应动态工具栏的变化。
- 大视口和小视口的单位分别以lv和sv为前缀，表示不同的视口状态。
- 动态视口根据动态工具栏的状态变化，单位以dv为前缀。
- 这些新单位在Chrome 108中发布，并已在Safari和Firefox中支持。
- 动态视口的值不会以60fps更新，且屏幕键盘不影响视口单位的大小。
➡️
