增量 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 less 的比例。

问题：有没有办法只使用css来定义增量媒体查询？

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

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

Answer 1

仅使用 CSS 是不可能的。您可以通过添加一个 window.onresize 函数来使用 JS 来执行此操作，以观察调整和缩放document 的body。此解决方案还可以动态扩展，因此您无需担心断点或@media 查询。

function updateScale() {
  let viewScale = window.innerHeight / document.documentElement.scrollHeight;
  document.body.style = 'transform:scale(' + viewScale + ')';
  document.documentElement.scrollHeight = window.innerHeight;
}

window.onresize = function() {
  updateScale();
}
updateScale();

body {
  transform-origin: 0 0;
  margin: 0;
  padding: 0;
  overflow: hidden;
}

#block {
  background-color: black;
  width: 300px;
  height: 4000px;
}

<div id='block'></div>

Answer 2

@NathanFries 是正确的，这不是原生 CSS 所能实现的。

CSS 包含 viewport units 用于您的宽度和高度的基于百分比的值，但您不能将其传递给 scale() 函数。

然后您需要将其绑定到某个 resize 事件侦听器。

这里有一个简单的例子，可以完成你想做的事情：

// @see https://github.com/WICG/EventListenerOptions/blob/9dcca95/explainer.md#feature-detection
// @example `elem.addEventListener('touchstart', fn, supportsPassive ? { passive: true } : false);`
var checkSupportPassiveEvents = function() {
    var supportsPassive = false;
    try {
        var opts = Object.defineProperty({}, 'passive', {
            get: function() {
                supportsPassive = true;
            },
        });
        window.addEventListener('testPassive', null, opts);
        window.removeEventListener('testPassive', null, opts);
    } catch (e) {}

    return supportsPassive;
};

var supportsPassive = checkSupportPassiveEvents();

var mapRange = function(fn, inStart, inEnd, outStart, outEnd) {
    if (outStart === void 0) {
        outStart = inStart;
        outEnd = inEnd;
        inStart = 0;
        inEnd = 1;
    }

    var inRange = inEnd - inStart,
        outRange = outEnd - outStart;

    return function(val) {
        var original = fn((val - inStart) / inRange);
        return outStart + outRange * original;
    };
};

var linear = function(x) {
    return x;
};

var minHeight = 320;
var maxHeight = 620;
var minScale = 0.45;
var maxScale = 1;
var screenHeightToScaleFactorInner = mapRange(linear, minHeight, maxHeight, minScale, maxScale);

var screenHeightToScaleFactor = function(height) {
    if (height <= minHeight) {
        return minScale;
    } else if (height > maxHeight) {
        return maxScale;
    } else {
        return screenHeightToScaleFactorInner(height);
    }
};

window.addEventListener(
    'resize',
    function(e) {
        var height = this.innerHeight;

        this.document.body.style.transform = 'scale(' + screenHeightToScaleFactor(height) + ')';
    },
    supportsPassive ? { passive: true } : false
);

Answer 3

在这种情况下，您可能必须使用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)

}

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

Answer 4

对于 CSS 解决方案，您可以考虑使用 vh 和 vw 单位，但无法使用规模，因为这需要一个无单位的值。

另一种方法是使用translateZ() 和一些透视来模拟缩放动画。

这是一个基本示例。结果不准确，因为我只是想演示这个技巧。运行sn -p整页调整窗口高度，就可以看到元素缩放了。

.box {
  width:100px;
  height:100px;
  background:red;
  transform:perspective(180px) translateZ(15vh);
  transform-origin:top left;
}

<div class="box">
some text here
</div>

您只需要为不同的值找到正确的计算方法。