Question

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

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

我尝试的事情：

在html或body元素（zoom: 2）上设置css zoom属性：

这不会缩放媒体查询。过去以400px触发的媒体查询仍将以400px触发。如果我使用浏览器的缩放控件来放大页面，则媒体查询按比例缩放，但缩放css属性不会发生这种情况。此外，Firefox不支持 zoom ，并且使用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>

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

2 个答案: