浅谈 CSS3 视口单位：如何优化移动端和PC端显示
前言
网站会在 PC 和移动端上浏览，那么各个浏览器和设备的差异性，会使得兼容处理是一件麻烦的事情。尤其是移动端上的那些个异形屏和内容展示的理念。对此我使用的是tailwind css 。今天要分享的是移动端上的屏幕展示问题。
视口单位概述：
- vw (视口宽度)：视口宽度的 1%。
- vh (视口高度)：视口高度的 1%。
设置元素的宽度为 100vw，高度为 100vh，该元素将覆盖整个视口。
新视口单位：
- vi：视口内嵌轴（inline axis）大小的 1%。
- vb：视口块轴（block axis）大小的 1%。
- vmin：
vw和vh中的较小者。 - vmax：
vw和vh中的较大者。
这些新视口单位对大多数浏览器提供了良好的支持，但在移动设备上存在一些问题，特别是由于动态工具栏（如地址栏、标签页栏）的存在，视口尺寸可能会变化。移动设备上的 100vh 可能在应用加载时过高，因为动态工具栏可能会影响视口的实际可见高度。
向下滚动的时候会动态收起工具栏
解决方案和新单位：
为了应对这些问题，CSS 工作组引入了新的视口单位：
- 大视口（假设所有用户代理界面（UA）在收起状态下的视口）：
- lvw、lvh、lvi、lvb、lvmin、lvmax
- 小视口（假设所有用户代理界面在展开状态下的视口）：
- svw、svh、svi、svb、svmin、svmax
这些单位在视口尺寸调整时保持稳定，不受用户代理界面动态变化的影响。
此外，还有一个 动态视口，用于在动态工具栏展开或收起时调整视口大小：
- 当动态工具栏展开时，动态视口（dvw、dvh、dvi、dvb、dvmin、dvmax）等于小视口的大小。
- 当动态工具栏收起时，动态视口等于大视口的大小。
支持情况：
- Chrome: 从版本 108 开始支持。
- Safari: 从版本 108 开始支持。
- Firefox: 从版本 101 开始支持。
- 其他: 支持情况较低（例如 15.4 版本的浏览器）。
这些新单位和调整旨在解决移动设备上动态工具栏对视口尺寸的影响，使开发者能够更好地控制元素的显示。