各位观众老爷们，晚上好！我是你们的老朋友，今天咱们聊聊 CSS 视口单位（Viewport Units）这玩意儿。这玩意儿听着高大上，vw、vh、vmin、vmax，看起来似乎是响应式设计的救星，能让我们轻松适配各种屏幕尺寸。但！是！魔鬼往往藏在细节里，视口单位用不好，那绝对是挖坑给自己跳！今天我就来扒一扒这玩意儿的底裤，看看它有哪些陷阱，以及如何优雅地避开它们。 一、 视口单位是个啥？ 首先，咱们简单回顾一下视口单位的概念。 vw (Viewport Width): 1vw 等于视口宽度的 1%。如果视口宽度是 1000px，那么 1vw 就是 10px。 vh (Viewport Height): 1vh 等于视口高度的 1%。如果视口高度是 800px，那么 1vh 就是 8px。 vmin (Viewport Minimum): 选取视口宽度和高度中较小的值，然后取其 1%。如果视口宽度是 1200px，高度是 800px，那么 1vmin 就是 8px。 vmax (Viewport Maximum): 选取视口宽度和高度中较大的值，然后取其 1%。如果视口宽度是 1200p …
继续阅读“CSS `Viewports Units` (`vw`, `vh`, `vmin`, `vmax`) 在响应式设计中的陷阱”