我的字体大小根据项目的数量而变化答案

【问题标题】：My font-size changes depending on the number of items我的字体大小根据项目的数量而变化
【发布时间】：2021-04-21 23:50:59
【问题描述】：

我为我的网站创建了一个移动部分（它不使用@media，因为它是网站的另一部分，我更喜欢做一个不同的视图），除了我的字体大小搞砸了，但很多.

例如，当你必须滚动页面时，某些项目的 font-size 变得太大或太小，我不知道这是从哪里来的？

比如：

1/2 项：

2 个或更多项目：

我的代码：

.page-mnu
{
  padding: 15.2vh 1.2vh;
  animation-name: arrivedroite;
  animation-duration: 0.8s;
  animation-delay: 0.3s;
  opacity: 0;
  transition: 0.8s;
  font-size: 2.8rem;
}

.box-show {
  display: flex;
  flex-direction: column;
  margin: 2.8rem 0;
}

.box-ind {
  border: 0.2rem solid black;
  margin: 1.3rem 0;
}

.tt-box {
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  width: 100%;
  height: 5.2vh;
  font-size: 2.1rem;
}

.cnt-box {
  font-size: 1.8rem;
  padding: 1.2rem;
}

<div class="page-mnu">
  <b>Bonjour NOM - PRENOM</b>
  <div class="box-show">
    <div class="box-ind" style="border-color: #22248EFF;">
      <div class="tt-box" style="background: #22248EFF;">Infos de l'établissement</div>
      <div class="cnt-box"><i>Aucune information pour le moment</i></div>
    </div>
    <div class="box-ind" style="border-color: #22248EFF;">
      <div class="tt-box" style="background: #22248EFF;">Infos de l'établissement</div>
      <div class="cnt-box"><i>Aucune information pour le moment</i></div>
    </div>
    <div class="box-ind" style="border-color: #22248EFF;">
      <div class="tt-box" style="background: #22248EFF;">Infos de l'établissement</div>
      <div class="cnt-box"><i>Aucune information pour le moment</i></div>
    </div>
    <div class="box-ind" style="border-color: #22248EFF;">
      <div class="tt-box" style="background: #22248EFF;">Infos de l'établissement</div>
      <div class="cnt-box"><i>Aucune information pour le moment</i></div>
    </div>
    <div class="box-ind" style="border-color: #22248EFF;">
      <div class="tt-box" style="background: #22248EFF;">Infos de l'établissement</div>
      <div class="cnt-box"><i>Aucune information pour le moment</i></div>
    </div>
    <div class="box-ind" style="border-color: #22248EFF;">
      <div class="tt-box" style="background: #22248EFF;">Infos de l'établissement</div>
      <div class="cnt-box"><i>Aucune information pour le moment</i></div>
    </div>
  </div>
</div>

【问题讨论】：

您的 CSS 缺少第一个规则集的选择器。我似乎无法重现该问题，因此它可能来自页面上的其他 CSS。
您的字体大小似乎是在 rem 中定义的，这取决于根元素的字体大小。如果根元素在不同页面有不同的font-size，它会相应地改变rem定义的font-size
@SeeoX 我认为我没有基本字体大小，所以如果我理解正确， rem 继承自根元素？它必须是 px 还是可以是 rem / em？（我的css：mobile.schoolmore.cf/css/style_index.css）

标签： html css font-size

【解决方案1】：

我的错，我忘记了元视口，还是谢谢你！

【讨论】：