用视窗缩放网页布局

Question

我知道CSS 3单位vw, vh和vm，这似乎是有用的，使元素有他们的盒子大小和文本大小相对于浏览器的视口大小。然而，遗憾的是，目前主流浏览器并不支持这些功能;只有ie9 +才有

我可以用什么其他方法来做的事情，如CSS font-size属性缩放的视窗?如果可能的话，我希望避免使用JavaScript和/或jQuery解决方案。

Answer 1

做一个100%可扩展的网站是可能的。正如Rev所说，您可以通过使用百分比值来做到这一点，但这很棘手。

更好的选择是使用@media queries。它们允许您在特定条件下仅对页面应用CSS规则。通过使用媒体查询来检测设备宽度和/或页面宽度，您可以对网站在不同视口大小下的外观进行微调控制。例如:

@media screen and (max-device-width: 960px) {
    font-size:14px;
}
@media screen and (max-device-width: 480px) {
    font-size:13px;
}

现在，上面的例子相当琐碎和做作。为了更深入地了解使用媒体查询可以完成什么，我建议您查看W3C规范页面。其中最强大的是width、min-device-width、max-device-width、portrait|landscape和print查询。

作为一个旁注，确保在CSS的底部包含这些样式，这样它们就不会被默认样式覆盖。