html - 问题 css 字体大小响应

Question

我开发了一个 HTML 网页。我想使用 Google Chrome 移动模拟器查看我的元素在移动设备上的行为。

我发现了一些奇怪的事情。

我有这段代码:

<div>
    <div>
        <span>config.alarm_vocal_lines_config[1].line_id</span>
        <span>1 </span>
    </div>
    <div>
        <span>config.alarm_vocal_lines_config[1].audio_level_line_config</span>
        <div>
   <span>config.alarm_vocal_lines_config[1].audio_level_line_config.main</span>
            <input type="number" value="-90">
        </div>
    </div>
    <br>
</div>

<div>
     <div>
        <span>config.alarm_vocal_lines_config[2].line_id</span>
        <span>2 </span>
     </div>
     <div>
         <span>config.alarm_vocal_lines_config[2].audio_level_line_config</span>
     </div>
     <br>
</div>

<div >
  <div >
    <span>config.alarm_vocal_lines_config[3].line</span>
  </div>
  <br>
</div>

第一个问题:对于这段代码，在模拟器中，第三行比另一行小。

为什么？如何避免？

第二个问题，如果我从最后一行删除一个字符，每一行都会变小:

有人能告诉我为什么样式会改变以及如何避免吗？

不确定我是否说清楚了。请要求进一步说明。

我没有任何 CSS

Answer 1

如果它是您关心的字体大小，您可以尝试将其粘贴到您的 CSS 文件中(或者创建一个，如果您没有的话)

span {

  font-size: 16px !important;

}