按比例缩放页面（包括媒体查询）

Question

我想要做的是能够通过编程方式缩放页面，而棘手的部分是我希望媒体查询也以相同的比例缩放。因此，如果我将页面中的所有内容按2倍比例缩放，原来在400px时触发的媒体查询现在应该在800px时触发。

我尝试过以下方法： - 在html或body元素上设置css缩放属性（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 作为解决方案的一部分，但放弃媒体查询并用完全不同的方式实现似乎有点过于极端了，这个本应该很简单的问题。

您有什么建议吗？

- Se7en

Answer 1

我能想到的最好的解决方案是对所有需要可缩放的元素使用rem单位，这样它们可以通过更改html元素的字体大小进行缩放。对于媒体查询（忽略在html元素上设置的字体大小属性），我编写了几行javascript代码，基本上遍历所有媒体查询并将当前值乘以比例尺。

以下是一个简化的示例： http://plnkr.co/edit/qz4QAFPc9mGnUlIIv6Tw?p=preview 该示例使用像素单位进行媒体查询，并假定基础字体大小为16px。如果要用于生产，需要稍作修改以变得更加灵活。

- Se7en

Answer 2

为什么不在CSS中使用 zoom: XX% 呢？将其应用于需要缩放的所有容器。请注意，您需要将自身容器的宽度或高度设置为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不支持缩放。

- Plippie