css - 有没有办法使用 transform : scale() dynamically

Question

我正在制作一个带有 FlipClock 倒计时的网站。默认情况下它太小了。它必须使用 transform: scale() 或 zoom 进行缩放，更改 width 和 height 属性只会增加倒计时周围的白色量。在非 1920*1080 的屏幕上，时钟的大小不正确。

我已经尝试过一些 JS 缩放器，但是它们使用像素大小来缩放，所以它不起作用。我也试过一个简单的视口(viewport)。

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/flipclock/0.7.8/flipclock.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="clock" style="margin:2em; transform: scale(2.5);"></div>
<script type="text/javascript">
    var clock;
    $(document).ready(function() {
        var currentDate = new Date();
        var futureDate  = new Date("Dec 24, 2019 00:00:00");
        var diff = futureDate.getTime() / 1000 - currentDate.getTime() / 1000;
        // Instantiate a coutdown FlipClock
        clock = $('.clock').FlipClock(diff, {
            clockFace: 'DailyCounter',
            countdown: true,
        });
    });
</script>

Answer 1

我找到了一种使用 JS 来完成我想做的事情的方法。

let perpx = 2.5/1920;
let ratio = perpx * window.screen.width;
document.getElementById('clock').style.transform = "scale(" + ratio + ")";