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

Question

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

我尝试了一些 JS 缩放器，但是这些缩放器使用像素大小来缩放，所以它不起作用。我也尝试了一个简单的视口。

<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 + ")";