Question

我正在建立一个带有FlipClock倒计时的网站。默认情况下，它太小。它必须使用transform：scale（）或zoom进行缩放，更改width和height属性只会增加倒计时周围的白色数量。在不是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 + ")";

有没有一种方法可以使用transform：scale（）动态

1 个答案: