CSS

Question

我有一个位于屏幕中心的元素，希望它的大小固定，除非它不适合 window，然后它应该按比例缩小。不仅是宽度和高度，还有它的所有内容。所以 @media screen 内部的 transform: scale() 看起来是个不错的解决方案，但我不知道如何计算它的参数。我尝试将当前视口高度除以 const 值，但没有用。

@media screen and (max-height: 300px) {
  #myform {
    transform: scale(calc(100vh / 300));
  }
}

主要是根据高度进行缩放，但是如果可以根据高度和宽度进行智能缩放就完美了。

这里是JsFiddle

Answer 1

如果有人仍然来到这里，我没有在 css 中找到解决方案，而是用 css+js 做了一个技巧。

css:

:root {
    --trickyScale: 1;
}

#whereverYouNeed{
    transform: scale(var(--trickyScale));
}

js:

window.onresize = function() {
    let container = document.getElementById("whereverYouNeed");
    const minScale = 0.75;
    const maxScale = 1;
    let scale = Math.min(window.innerWidth / (container.offsetWidth + 8),
            window.innerHeight / (container.offsetHeight + 8));
    scale = Math.min(maxScale, Math.max(minScale, scale))
    document.documentElement.style.setProperty("--trickyScale", scale);
}

Demo JsFiddle

CSS - 如果 window 视口变得太小，则按比例缩放元素

CSS - Scale element proportionally if window viewport become too small

scaling

viewport