Question

我用html css和js制作了一个数字时钟。在这里https://ibnul.neocities.org/clock.html

我以某种方式制作了css代码，使其可以在任何类型的设备上的框架中间显示时钟文本。但是，当我在移动设备上打开它时，文本不会显示在框架的中间，而是在框架的底部边缘附近显示了很多。它看起来像这张图片mobile view where the text does not show in the middle of the frame

但是文字显示在台式机设备框架的中央，就像这张图片desktop view where the text shows in the middle of the frame

这是代码

function a() {
            var d = new Date(),
                h = d.getHours(),
                m = d.getMinutes(),
                s = d.getSeconds(),
                n = 'pm';
            if (h < 12) {
                n = 'am'
            }
            if (h == 0) {
                h = 12
            }
            if (h > 12) {
                h -= 12
            }
            if (h < 10) {
                h = '0' + h
            }
            if (m < 10) {
                m = '0' + m
            }
            if (s < 10) {
                s = '0' + s
            }
            document.getElementsByClassName('d')[1].textContent = h;
            document.getElementsByClassName('f')[1].textContent = m;
            document.getElementsByClassName('g')[1].textContent = s;
            document.getElementsByClassName('h')[1].textContent = n;
            setTimeout(a, 1000)
        }
        a()

        body,
        div,
        p {
            margin: 0px
        }
        .c div,
        .c p {
            line-height: 0.8;
            font-family: x
        }
        
        .c div {
            color: rgba(0, 0, 0, 0.103)
        }
        
        .c p {
            color: #000
        }
        
        .b {
            width: 100vw;
            height: 100vh;
            overflow: hidden;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: rgb(241, 239, 237)
        }
        
        .c {
            display: flex;
            align-items: baseline;
            font-size: calc(75px + 14*((100vw - 320px)/100));
            user-select: none;
            cursor: default;
            border: 3.4px solid #c4c4c4;
            border-radius: 10px;
            background: rgba(21, 41, 80, 0.062)
        }
        
        .p {
            position: relative
        }
        
        .q {
            font-size: 1em
        }
        
        .r {
            font-size: inherit
        }
        
        .s {
            position: absolute;
            top: 0;
            left: 0
        }
        
        .d {
            padding: 0.1em 0em 0.1em 0.18em
        }
        
        .f {
            padding: 0.1em 0.2em 0.1em 0em
        }
        
        .g {
            padding: 0.1em 0.2em 0.1em 0.2em
        }
        
        .u {
            font-size: 0.6em
        }
        
        .h {
            padding: 0.1em 0.2em 0.1em 0.2em
        }
        
        .v {
            font-size: 0.67em
        }
        
        @media(max-width:500px) {
            .c {
                font-size: calc(60px + 14*((100vw - 320px)/100));
                border: 2.4px solid #c4c4c4
            }
        }

    <div class=b>
        <div class=c>
            <div class='d p q'>88
                <p class='d r s'>12</p>
            </div>
            <p class='e q'>:</p>
            <div class='f p q'>88
                <p class='f r s'>00</p>
            </div>
            <div class='g p u'>88
                <p class='g r s'>00</p>
            </div>
            <div class='h p v'>am
                <p class='h s '>am</p>
            </div>
        </div>
    </div>

我无法找到发生这种情况的确切原因，因此无法解决。有人可以帮忙吗？

Answer 1

对我来说，无论是在移动设备还是台式机上，文本均位于底部附近而未居中。

好像您在Windows计算机上，其中.woff字体扩展名以不同的行高呈现。您可能需要识别操作系统，并相应地应用样式（行高）。

垂直居中的文字不在移动设备上显示中心，而在台式机设备上显示中心

1 个答案: