按比例缩放页面(包括媒体查询)

Question

我想做的是能够以编程方式向上或向下缩放页面，棘手的部分是我希望媒体查询也以相同的速率缩放。

因此，如果我将页面中的所有内容放大 2 倍，过去以 400px 触发的媒体查询现在应该以 800px 触发。

我尝试过的事情：

• 在 html 或 body 元素上设置 css zoom 属性 (zoom: 2)：

这不会缩放媒体查询。过去以 400px 触发的媒体查询仍将以 400px 触发。如果我使用浏览器的缩放控件来放大页面，则媒体查询按比例缩放，但缩放 css 属性不会发生这种情况。此外，Firefox不支持缩放，使用transform: scale(2)也不会给出所需的结果。

• 对所有内容(包括媒体查询)使用 rem 单位，然后更改 html 元素的基本字体大小以按比例放大或缩小所有内容。

这适用于每个元素，但不适用于媒体查询。显然，媒体查询中的 rem 单位使用浏览器的默认字体大小(通常为 16px)，而不是在 html 元素上设置的基本字体大小。

• 在媒体查询中使用 Calc 和 CSS 变量

我尝试做这样的事情：

@media only screen and (max-width: calc(400px * var(--scale-factor))

但是目前没有浏览器支持媒体查询中的calc和css变量。

我发现的唯一解决方案是完全废弃css媒体查询并使用Javascript来模拟效果，但这需要更多的代码，而且似乎不是一个优雅的解决方案。我不介意使用一些Javascript作为解决方案的一部分，但是废弃媒体查询并以完全不同的方式进行似乎有点极端，这对于应该非常简单的事情。

有什么建议吗？

Answer 1

我能想到的最佳解决方案是将rem单位用于我想要扩展的所有内容，以便可以通过更改 html 元素的字体大小来缩放它们，对于媒体查询(忽略在 html 元素上设置的 font-size 属性)，我写了几行 javascript 代码，基本上遍历所有媒体查询并将当前值乘以缩放。

下面是一个简化的示例： http://plnkr.co/edit/qz4QAFPc9mGnUlIIv6Tw?p=preview

该示例使用像素单位进行媒体查询，并假定基本字体大小为 16px。如果它用于生产，则需要对其进行一些修改以变得更加灵活。

Answer 2

为什么不使用缩放：XX%; 在 CSS 中。 把它放在所有需要缩放的容器上。请注意，您需要容器本身设置100%的宽度或高度。例如，您不能使用 vX 单元进行缩放

let btn = document.getElementById('zoomer');
let cont = document.querySelector('.container')
btn.addEventListener("click", function() {
cont.classList.toggle('zoom');
});

html {
font-size: 16px;
font-family: Sans-serif;
}
:root {
--zoom-level: 50%;
}
.zoom {
zoom: var(--zoom-level);
}
.container {
width: 100%;
margin: 1rem;
}
button {
padding: 0.5rem 1rem;
font-weight: 700;
}

<div class="container">
<h3>Zoom example</h3>
<p>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur id enim ligula. Praesent gravida risus quis augue vulputate, eget finibus nibh posuere. Maecenas viverra luctus lobortis. Vivamus imperdiet ex molestie neque condimentum tristique. Proin
pellentesque porttitor erat a commodo. Phasellus vulputate at felis nec egestas. Nam eget orci sit amet risus posuere porta. Mauris at orci malesuada, fermentum lacus lobortis, scelerisque ante. Aliquam interdum euismod nisi a placerat. In aliquam
felis sit amet pulvinar mattis. Pellentesque a viverra enim. Vestibulum dictum placerat dui a tempor.
</p>
<img src="http://placekitten.com/300/300?image=3"><br>
<button type="button" id="zoomer">Zoom 50%</button>
</div>

请注意，Firefox 不支持缩放。