Html 字体大小将自动设置为屏幕的百分比

我正在研究网站的响应方面。 我有两个包含在flex包装中的框，当显示变小时，我想将其从

flex-direction:row

更改为

flex-direction:column

我想让他们从

O O

到

O

O

虽然当我这样做时，两个框的所有子框的字体大小都会出现错误

即使我将他们的字体设置为

font-size:2rem！重要信息

字体仍然不符合要求，并设置为屏幕宽度的%

请参阅以下图片的更多内容

在这里，我们可以看到“Lorem ipsum”标题太大，与2x16px（2rem）不对应。它的大小取决于屏幕的宽度，上一次我检查它是62.37626px或其他东西

当我没有在媒体查询中指定其新高度时，说明文本也太大了。 不过，其他两个文本元素似乎未被触及

这是默认的html，直到h2被窃听

section.box-container
  .lastest-projects
    h2 Lorem ipsum

section.box-container
  display: flex
  margin: 0px 2rem

  .lastest-projects
    padding-right: 2em
    padding-top: 2em
    margin-right: 1rem
    border-right: 1px solid rgba(0, 0, 0, 0.1)
    width: 50%
    padding-bottom: 2em

    h2
      margin-bottom: 1rem

这是默认的css，直到h2被窃听

section.box-container
  .lastest-projects
    h2 Lorem ipsum

section.box-container
  display: flex
  margin: 0px 2rem

  .lastest-projects
    padding-right: 2em
    padding-top: 2em
    margin-right: 1rem
    border-right: 1px solid rgba(0, 0, 0, 0.1)
    width: 50%
    padding-bottom: 2em

    h2
      margin-bottom: 1rem

这是唯一的媒体查询

@media only screen and (min-width: 600px)

  section.box-container
    flex-direction: column

  .lastest-projects
    width: auto

及

---

如果有人知道原因，请提前感谢

你介意用一个片段来展示问题吗？你介意用一个片段来展示问题吗？