html - 根据屏幕尺寸动态缩放div

Question

经过一些研究，我找到了一个解决方案，可以在特定屏幕尺寸下缩放 div 的所有内容，

@media (max-height: 675px) {
    .card-scaler{
        margin: 0 auto;
        -ms-zoom: 0.75;
        -moz-transform: scale(0.75);
        -o-transform: scale(0.75);
        -webkit-transform: scale(0.75);
    }
}

但我想用动态数字(不是固定的 0.75)缩放所述 div。我希望 div 按 changing View 高度的百分比缩放。也就是说，如果有人改变屏幕尺寸，它不会跳到原始尺寸的 75%，而是随着屏幕的变化逐渐缩小尺寸。我找到了 calc() 函数，但它无法正常工作，因为我打算使用它。我正在寻找以下内容:

@media (max-height: 675px) {
    .card-scaler{
        margin: 0 auto;
        -ms-zoom: calc(vh/675);
        -moz-transform: scale(calc(vh/675));
        -o-transform: scale(calc(vh/675));
        -webkit-transform: scale(calc(vh/675));
    }
}

*注意:我不能使用 jQuery，尽管我不确定这是否重要...干杯，谢谢!

Answer 1

如果可以的话，这里是您在普通 javascript 中需要的所有信息，并会根据屏幕尺寸的变化进行更新。

window.onresize = function(event){
    var w = window,
        d = document,
        e = d.documentElement,
        g = d.getElementsByTagName('body')[0],
        x = w.innerWidth || e.clientWidth || g.clientWidth,
        y = w.innerHeight|| e.clientHeight|| g.clientHeight;

}

现在只需按 ID 或类获取元素并根据需要编辑其高度和宽度属性。