發出CSS字體大小自適應

Question

我已經開發了一個HTML 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

您需要為文本添加行高。

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

Answer 2

如果您擔心的是字體大小，則可以嘗試將其粘貼到CSS文件中（如果沒有，則創建一個）

span {

  font-size: 16px !important;

}