為什么我的元素使用 2 種不同的字體大小？

Question

我將字體大小設置為全局。 當瀏覽器的寬度改變（一種流暢的排版）時，情況就會改變。 我將其設置為 body 元素。

但是當瀏覽器的大小改變時，它就會改變（字體大小）。 為什么？ 我該如何阻止呢？

 *, html { -webkit-box-sizing: border-box; box-sizing: border-box; } body { margin: 0; padding: 0; font-size: calc(16px +.75vw); }.container { background-color: #d1c6c6; padding: 10px; min-height: 100vh; }.container__box { font-weight: bold; color: white; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif; padding: 15px 10px; background-color: #8b2be4; width: 90vw; font-size: 30px; }

 <meta name="viewport" content="width=device-width, initial-scale=1.0"> <div class="container"> <div class="container__box">Gridfan Jessica</div> </div>

Answer 1

但是當瀏覽器的大小改變時，它就會改變（字體大小）。 為什么？

因為您在瀏覽器大小更改時使用了vw字體大小更改。

我怎樣才能阻止這個？

請改用px 。 如果這讓眼睛不舒服，請針對不同屏幕寬度使用不同字體大小的媒體查詢。