更改浏览器窗口宽度时放大/缩小所有元素、图像、文本答案

【问题标题】：Scale Up/Down all Elements, Images, Text when browser window width is changed更改浏览器窗口宽度时放大/缩小所有元素、图像、文本
【发布时间】：2014-11-17 09:46:26
【问题描述】：

有没有办法根据浏览器宽度缩小/放大所有元素，包括文本、图像等？这就像使用浏览器“缩小”只是为了避免浏览器水平滚动条。

【问题讨论】：

标签： html css

【解决方案1】：

您可以仅使用此 css 规则调整图像和视频的大小。

img, video { max-width: 100%; }

对于文本，您可以使用em 来调整视口和分辨率。您还应该在 html 和 body 元素上设置字体大小

html {
    font-size: 100%;
}

body {
    font-size: 1em;
}

/* Adjust the font size here to upscale the font when you've resized the page to 700px */
@media screen and (max-width: 700px) {
    html { font-size: 110%; }
}

如果您确实在考虑从字面上放大/缩小某些视口，只需使用媒体查询。像这样：

@media all and (max-width: 700px) and (min-width: 400px) {
    /* some funky stuff */
}

额外

要平滑不同视口之间的过渡，请在 html 标记上使用此 css 属性

transition: all 1s ease;

【讨论】：

@Perroquiet 这实际上是正确的答案，只是在 html font-size: 1vw 上应该使用vw 单位。尝试在http://oneapi.ru/showcases/上扩大/缩小浏览器
实际上，我的意思是body { font-size: 1vw }而不是html，并且所有站点都在em的相对测量中定义，可以在上述站点中检查。

【解决方案2】：

是的，尽管它需要 JavaScript 并且不适用于所有浏览器，只有那些支持 CSS 缩放的浏览器（我知道至少 Firefox 不支持）。我是怎么做的，比如说标准的非缩放页面宽度是 1024，我使用 jQuery 与行

$("html").css("zoom",window.innerWidth/1024);

每次调整窗口大小时（使用 window.onresize）。我使用它的网站仍然是非公开的，所以我无法向您展示示例，但它运行良好。

【讨论】：

这是 JavaScript，标签中没有提到，并不适用于所有浏览器。为什么这是公认的答案？
这行得通，但另一个答案更好（见我的 cmets 那里）