【问题标题】:Why 1rem bigger then 1.1rem, 1.2rem etc为什么 1rem 比 1.1rem、1.2rem 等大
【发布时间】:2020-05-24 07:01:28
【问题描述】:

字体大小的文本:1rem 大于它应该是:

只有在所有这些条件下,问题才会重现:

  1. ios
  2. 水平方向
  3. span 标签之外的一些文本

HTML 代码:

   <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
    <html>
        <head>
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <style>
                .t5 { font-size: 0.5rem;}
                .t6 { font-size: 0.6rem;}
                .t7 { font-size: 0.7rem;}
                .t8 { font-size: 0.8rem;}
                .t9 { font-size: 0.9rem;}
                .t10 { font-size: 1.0rem;}
                .t11 { font-size: 1.1rem;}
                .t12 { font-size: 1.2rem;}
                .t13 { font-size: 1.3rem;}
                .t14 { font-size: 1.4rem;}
                .t15 { font-size: 1.5rem;}
            </style>
        </head>
        <body>
            Some text<br />
            <span class="t5">Test text 0.5</span><br />
            <span class="t6">Test text 0.6</span><br />
            <span class="t7">Test text 0.7</span><br />
            <span class="t8">Test text 0.8</span><br />
            <span class="t9">Test text 0.9</span><br />
            <span class="t10">Test text 1.0</span><br />
            <span class="t11">Test text 1.1</span><br />
            <span class="t12">Test text 1.2</span><br />
            <span class="t13">Test text 1.3</span><br />
            <span class="t14">Test text 1.4</span><br />
            <span class="t15">Test text 1.5</span><br />
        </body>
    </html>

【问题讨论】:

  • 如果你尝试1rem;而不是1.0rem;会怎样?
  • @TemaniAfif 结果相同

标签: css ios responsive-design font-size device-width


【解决方案1】:

您可能会遇到 iOS 将字体缩放为可读大小的问题。参考this answer这里需要设置-webkit-text-size-adjust: none;

【讨论】:

  • 没有“不完整的标签”。您可以使用验证器进行检查:validator.w3.org
  • @DimaPavlov 你试过了吗:-webkit-text-size-adjust: none ?
  • 我误解了您所说的 san 标签外的文本是什么意思。您的意思是标签中不存在文本,而是直接与标签一起使用
猜你喜欢
  • 2016-07-07
  • 2023-03-18
  • 2022-07-29
  • 1970-01-01
  • 1970-01-01
  • 1970-01-01
  • 2019-04-23
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多