黑羽的个人博客
·
CSS 踩坑之浏览器长度单位，vh，lvh，svh
💡
原文中文，约1400字，阅读约需4分钟。
📝
内容提要
使用`vh`单位可能导致手机上全屏显示问题，因为其高度与实际视口高度不一致。建议使用`dvh`单位以动态调整高度，确保页面元素正确显示。
🎯
关键要点
-
使用`vh`单位可能导致手机上全屏显示问题，因其高度与实际视口高度不一致。
-
建议使用`dvh`单位以动态调整高度，确保页面元素正确显示。
-
在手机模式下，`vh`的高度可能比首次打开的视口高度要大，导致布局问题。
-
其他CSS单位如`lvh`、`svh`和`dvh`提供了不同的视口高度计算方式。
-
`dvh`单位在导航栏显示和隐藏时都能提供更准确的视口高度。
-
在`tailwindcss`官网和`MDN`文档中可以找到关于CSS长度单位的更多信息。
❓
延伸问答
为什么使用vh单位在手机上可能会出现全屏显示问题？
使用vh单位时，手机上的高度可能与实际视口高度不一致，导致布局问题。
在CSS中，dvh单位有什么优势？
dvh单位可以动态调整高度，确保在导航栏显示和隐藏时提供更准确的视口高度。
除了vh和dvh，还有哪些CSS长度单位可以使用？
还有lvh和svh单位，分别表示最大视口高度和不算导航栏的视口高度。
如何解决使用vh单位导致的布局问题？
可以将高度计算切换为dvh单位，以获得更准确的视口高度。
在手机模式下，vh单位的高度为何会比首次打开的视口高度大？
因为在某些情况下，滑动网页时，导航栏会隐藏，此时的vh才是实际视口高度。
在哪里可以找到关于CSS长度单位的更多信息？
可以在tailwindcss官网和MDN文档中找到关于CSS长度单位的详细信息。
➡️
