使用视口缩放Web布局 [英] scaling a web layout with the viewport

问题描述

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

I am aware of the CSS 3 units vw, vh and vm, which seem to be useful for making elements that have their box sizes and text sizes relative to the browser's viewport size. However, sadly, these are not well-supported with the current major browsers; only Internet Explorer 9+ does.

我还可以使用什么其他方法来实现CSS font-size 属性视口的比例？我想尽可能避免使用JavaScript和/或jQuery解决方案。

What other methods can I use to do things like CSS font-size properties that scale with the viewport? I would like to avoid JavaScript and/or jQuery solutions if possible.

推荐答案

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

Doing a 100% scalable website is possible. As Rev said, you can do this by using percentage values, but it is tricky.

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

The better option is to utilize @media queries. These allow you to apply CSS rules to a page only under certain conditions. By using media queries to detect the device width and/or the page width, you can apply fine tune control over how your site looks AT different viewport sizes. For instance:

@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宽度，肖像|风景和打印查询。

Now, the above example is rather trivial and contrived. For a deeper understanding of what you can accomplish with media queries, I recommend you view the W3C spec page. Some of the most powerful are the width, min-device-width, max-device-width, portrait|landscape, and print queries.

请注意，请确保在CSS底部包含这些样式，以免默认样式覆盖这些样式。

这篇关于使用视口缩放Web布局的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！