在 2016 年将 CSS3 VW 和 VH 用于响应式和跨浏览器站点是正确的

Question

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

Answer 1

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

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

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

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

例如

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

或

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

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

希望对您有所帮助。