使用视口缩放Web布局

Question

我知道CSS 3单元vw，vh和vm，它们似乎对于制作相对于浏览器视口的框大小和文本大小的元素非常有用尺寸。然而，遗憾的是，目前的主流浏览器并没有很好地支持这些功能。只有Internet Explorer 9+可以。

我还可以使用哪些其他方法来处理与视口一起缩放的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 spec page。一些最强大的功能是width，min-device-width，max-device-width，portrait|landscape和print查询。

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