html - 在 2016 年将 CSS3 VW 和 VH 用于响应式和 CrossBrowse 网站是正确的

Question

如果在 2016 年是使用 css3 vw 和 vh 单元创建响应式网站的正确时间和地点，我一直在徘徊，根据我的经验，这是实现它的最简单方法......但我几乎没有看到任何地方使用这种技术。为什么呢？如果您有更好的方法来制作响应式网站，请分享...

Answer 1

VH 和 VW 与视口的高度/宽度相关，因此它们非常适合基于视口大小缩放元素。

例如，如果您想要 2 列布局，则将每列的宽度指定为 50vw 会很好。如果您不需要使用 vmax， 根据Can I Use browser 支持很好。

缩放是响应式设计的一个方面，另一个方面是改变页面布局。
正如下面George Chanturia正确指出的那样，以下评论指的是自适应设计，而不是响应式设计。

假设您希望您的 2 列布局在智能手机上折叠成单列，您可能想要使用媒体查询和像素或 rems 或 ems

例如

@media only screen and (max-width: 25em) { 
...
}

或者

@media only screen and (max-width: 400px) {
...
}

当然，您可以在这些媒体查询中使用 VM 和 VW，但这不是您可以在实际媒体查询中测试的功能。

希望这可以帮助。