为什么css字体大小改变时使用显示:弯曲;

3htmauhk  于 2022-12-15  发布在  其他
关注(0)|答案(3)|浏览(143)

我在使用CSS和HTML时遇到字体大小问题。无论我使用相对或绝对大小单位,当我使用display时,它都会以不同的大小显示我的“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”标签,即使它们的大小不同

谢谢你的帮助:)

vwkv1x7d

vwkv1x7d1#

是的,因为您在这里使用的是vw。所以,如果您想修复您的字体大小,请使用px

8ljdwjyq

8ljdwjyq2#

我测试了你发布的代码,然后删除了所有与flex相关的属性。除了预期的布局流更改外,文本大小没有任何差异。所有p示例使用相同的16 px大小。你发布了所有样式吗?你的图像显示sans-serif字体,但你的样式不包含font-family,所以通常字体在大多数浏览器/操作系统上默认为衬线字体。如果你有更多的样式或者正在使用像Bootstrap这样的CSS框架,请更新你的问题以指定这一点。
另一个想法是,当我缩放 windows 时,我会在大部分文字中看到预期的缩放比例,因为您使用的是vw-相对字号。一般段落文字是唯一 * 不会 * 缩放的文字。这可能就是您看到的内容?请尝试变更:

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

致:

p {
  font-weight: 400 /* 407 is not a font-weight value */;
  font-style: normal;
  font-size: 3vw; /* use vw-relative units to match other text elements on the page */
  color: rgb(40, 40, 40);
}
zzoitvuj

zzoitvuj3#

好吧,这可能是不相关的,但我有同样的问题。2事实是,我从头开始写HTML页面。3我设置了CSS基本规则,它们在移动的设备的flex元素中被破坏了。4我相信这和Ethan在这里问的问题相似。
在我的例子中,由于我从头开始编写HTML,我忘记了head HTML标记中的viewport meta标记。

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

在这个问题中找到了我的答案:Website elements and fonts are too small in mobile devices
希望这能对某人有所帮助!

相关问题