增量CSS媒体查询

Question

考虑一个样式表，该样式表使用media查询和来随着高度的减小而调整页面的大小transform：

@media (max-height: 620px) {
    body {
    transform: scale(0.95);
    }
}
@media (max-height: 590px) {
    body {
    transform: scale(0.90);
    }
}
@media (max-height: 560px) {
    body {
    transform: scale(0.85);
    }
}
// and so on ...

随着窗口高度的减小，页面“缩小”，从而允许将全部内容显示在较小的屏幕上。如果我要支持小于560px高度的屏幕，则需要添加更多media查询。

请注意，对于每一个30px丢失的高度，我们称0.05输入为较少的比例。

问题：是否可以仅使用定义增量媒体查询css？

后续：如果没有纯css解决方案，那么在香草JS中实现这种效果的最简单方法是什么？

编辑：谢谢大家发布此问题的不同解决方案。我感谢您的帮助。您的答案帮助我学习了如何改进代码。

Answer 1

在这种情况下您可能必须使用vanilla JavaScript。

所以，每个30px都是0.05，或者每个6px都是0.01从650px下往上。

这意味着 的数量600px是1按比例计算的，并且每个数量pixel都是0.01/6。

考虑到所有这些信息，我们可以使用resize事件来计算：

window.addEventListener('resize', changeTransform); // when resize, call changeTransform

var bodyEl = document.querySelector('body');

function changeTransform() {

  var scale = 1; // default scale
  if (window.innerHeight < 650) { // if window height < 650px, do magic
    scale = -0.83 + (0.05/30)*window.innerHeight;
  }
  bodyEl.style.transform = "scale(" + scale + ")"; // apply scale (1 or the calculated one)

}

希望它能以某种方式帮助你。