发出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

您需要为文字添加行高。

＆＃13;

＆＃13;

span {
   line-height: normal;
   font-size: 16px;
}

＆＃13;

＆＃13;

＆＃13;

Answer 2

如果您关注的是字体大小，可以尝试将其粘贴到您的CSS文件中（如果您还没有，请创建一个）

span {

  font-size: 16px !important;

}