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可以通过更改视图高度的百分比进行缩放。即如果有人正在改变屏幕尺寸，它不会只跳到原始尺寸的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或类获取元素，然后根据需要编辑其高度和宽度属性。

根据屏幕大小动态缩放div

1 个答案: