黑羽的个人博客
·
CSS 踩坑之浏览器长度单位，vh，lvh，svh
💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
使用`vh`单位可能导致手机上全屏显示问题，因为其高度与实际视口高度不一致。建议使用`dvh`单位以动态调整高度，确保页面元素正确显示。
🎯
关键要点
- 使用`vh`单位可能导致手机上全屏显示问题，因其高度与实际视口高度不一致。
- 建议使用`dvh`单位以动态调整高度，确保页面元素正确显示。
- 在手机模式下，`vh`的高度可能比首次打开的视口高度要大，导致布局问题。
- 其他CSS单位如`lvh`、`svh`和`dvh`提供了不同的视口高度计算方式。
- `dvh`单位在导航栏显示和隐藏时都能提供更准确的视口高度。
- 在`tailwindcss`官网和`MDN`文档中可以找到关于CSS长度单位的更多信息。
➡️
