为什么我的元素使用 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。如果眼睛不舒服，请针对不同屏幕宽度使用不同字体大小的媒体查询。