html - 字体大小自动设置为屏幕的百分比

Question

我正在研究网站的响应方面。我有两个盒子包含在一个 flex 包装器中，我想在显示器变小的时候改变flex-direction: row它们。flex-direction: column

我希望他们从

面向对象

至

○

O。

虽然当我这样做时，两个盒子的所有孩子的字体大小都会出错。

即使我将他们的字体设置font-size: 2rem !important为字体仍然不服从并设置为屏幕宽度的百分比。

通过以下图片查看更多信息。

网站的默认外观

带有媒体查询的网站外观

在这里我们可以看到“Lorem ipsum”标头太大了，不对应于 2 x 16px (2rem)。它的大小取决于屏幕的宽度，上次我检查它是 62.37626px 什么的。

当我没有在媒体查询中指定它的新高度时，描述文本也太大了。不过，其他两个文本元素似乎没有受到影响。

这是直到 h2 的默认 html，这是错误的

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

这是直到 h2 的默认 css，它正在窃听

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

和

@media only screen and (min-width:600px)
  h2
    font-size: 2rem

如果有人知道为什么会这样，请提前致谢。

标签： htmlcss