Why my element uses 2 different font-sizes?-CodePudding

I set a font-size as global. That changes when browser's width change(kind of fluid typography). I setted that to body element.

But when size of browser changes, then it changes(font-size). Why? and How can I stop this?

*,
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 >
  <div >Gridfan Jessica</div>
</div>

CodePudding user response：

But when size of browser changes, then it changes(font-size). Why?

Because you used vw font size changes when browser size changes.

How can I stop this?

Use px instead. If that's not eye comfortable, Use media query for different font sizes for different screen widths.