html - 为什么使用显示时CSS字体大小会改变: flex;

Question

我在使用 CSS 和 HTML 时遇到字体大小问题。无论我使用相对还是绝对尺寸单位，当我使用 display: flex 时，它都会以不同的尺寸显示我的“p”标签(照片中的粗体除外)。

如果我注释掉 Flex 样式，所有 p 标签都会恢复到相同的大小，但我的布局不会获得我想要的 de 样式。 (我知道，现在还没有修复，但我才刚刚开始)。

h1 {
  font-weight: 550;
  font-style: normal;
  font-size: 8vw;
  color: rgb(30, 30, 30);
}

h2 {
  font-size: 6vw;
  color: rgb(40, 40, 40);
}

h3 {
  font-size: 4vw;
  color: rgb(40, 40, 40);
}

p {
  font-weight: 407;
  font-style: normal;
  font-size: 100%;
  font-size: 16px;
  color: rgb(40, 40, 40);
}

h1,
h2,
p {
  text-align: left;
}

#PruebasCover {
  background-color: rgba(170, 208, 198, 0.24);
    display: flex;
    flex-direction: column;
    justify-content: center;
}

#PruebasCover h1,
p {
  margin: 0px;
  padding: 0px;
  margin: 0vw 0vw 0vw 0vw;
}

#PruebasCover h1 {
  margin-bottom: 2vh;
}

#PruebasCoverContainer {
  padding: 15vh 0vh 5vh 0vh;
}

#PruebasCoverBotonesContainer {
  width: 60vw;
  margin: 5vh 10vw 5vh 10vw;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.arrow {
  width: 10vw;
}

.EmptyButton,
.Button {
  padding: 18px 40px;
  font-size: 2.5vw;
  text-decoration: none;
  text-transform: uppercase;
  border-radius: 50px;
  display: block;
}

.EmptyButton {
  border: 2px rgb(0, 163, 163) solid;
  color: rgb(0, 163, 163);
}

.Button {
  background-color: rgb(0, 163, 163);
  border: 2px rgb(0, 163, 163) solid;
  color: white;
}

#QuienesSomos {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 80vw;
  margin-left: 10vw;
}

#nosotrosNumsContainer {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
}

.nosotrosNums {
  display: flex;
  flex-direction: row;
}

.nosotrosNums p,
h2 {
  padding: 0px;
  margin: 0px;
}

.nosIcon {
  width: 10vw;
  margin-right: 4vw;
}

<section id="PruebasCover">
  <div id="PruebasCoverContainer">
    <h1>Pruebas Para <br> Covid-19</h1>
    <p>Certificadas por la <b>COFEPRIS</b>, <b>INDRE</b> y <b>FDA</b></p>
    <p>
      - Cualitativas (GENRUI y Abbott) <br> - Cuantitativas (IChroma) <br> - PCR <br> - Antígeno
    </p>
  </div>

  <div id="PruebasCoverBotonesContainer">
    <a href="#" class="Button">Contacto</a>
    <a href="#" class="EmptyButton">Ver más</a>
  </div>
</section>

<section id="QuienesSomos">
  <img src="https://i.pinimg.com/736x/77/82/3f/77823f938e6a246ab82fc1207c27908b.jpg">
  <img src="SVG/Arrow.svg" class="arrow">
  <div>
    <h2>
      ¿Quienes Somos?
    </h2>
    <p>
      Somos una empresa mexicana líder en el sector salud y distribución de insumos médicos, conformada por un equipo multidisciplinario especializados en brindar atención médica personalizada y asesoramiento corporativo.
    </p>
    <a href="#" class="EmptyButton"> Leer más </a>
    <div id="nosotrosNumsContainer">
      <div class="nosotrosNums">
        <img src="SVG/Dropper.svg" class="nosIcon">
        <div>
          <h2>400+</h2>
          <p>Clientes</p>
        </div>
      </div>
      <div class="nosotrosNums">
        <img src="SVG/Doctor.svg" class="nosIcon">
        <div>
          <h2>20+</h2>
          <p>Médicos Especialistas</p>
        </div>
      </div>
    </div>
  </div>
</section>

结果:显示的屏幕，所有文本都是“p”标签，即使它们具有不同的大小

感谢您的帮助:)

Answer 1

好吧，所以这可能是无关的，但我也遇到了同样的问题。 事实上，我是从头开始编写 HTML 页面的。我设置了 CSS 基本规则，它们打破了移动设备的 Flex 元素。 我相信这与 Ethan 在这里问的类似。

就我而言，由于我是从头开始编写 HTML 的，所以我忘记了 head HTML 标记中的 viewport 元标记。

<meta name="viewport" content="width=device-width, initial-scale=1">

在这个问题中找到了我的答案:Website elements and fonts are too small in mobile devices

我希望这对某人有帮助!