使用视口缩放 Web 布局答案

【问题标题】：scaling a web layout with the viewport使用视口缩放 Web 布局
【发布时间】：2011-08-03 11:37:07
【问题描述】：

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

我还可以使用哪些其他方法来执行 CSS font-size 等随视口缩放的属性？如果可能，我想避免使用 JavaScript 和/或 jQuery 解决方案。

【问题讨论】：

标签： css

【解决方案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 底部包含这些样式，以免它们被默认样式覆盖。

【讨论】：

这是个好主意。是否也可以有一个完全缩放的布局，而不仅仅是两个“间隔”？还有，max-device-width和max-width有什么区别？
@Delan 我不会担心一个完全缩放的网站，因为用户可以轻松地将文本“捏缩放”到舒适的水平。您应该关注的只是设置一个适合他们的初始文本大小。（附带说明一下，您可以使用任何像素值作为宽度，并且不仅限于两个。阅读这些样式，您会看到您拥有多少控制权。
你可以做一堆不同的尺寸，但老实说只有 2-3 个可能是最好的。在设计站点时，最好在计算机之间尽可能保持一致，因此拥有几个不同的@media 比完全缩放要好。然而，如果你想绝对地扩展，你可以用百分比来做所有事情，但这有点棘手。