我在使用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”标签,即使它们的大小不同
谢谢你的帮助:)
3条答案
按热度按时间vwkv1x7d1#
是的,因为您在这里使用的是vw。所以,如果您想修复您的字体大小,请使用px
8ljdwjyq2#
我测试了你发布的代码,然后删除了所有与
flex
相关的属性。除了预期的布局流更改外,文本大小没有任何差异。所有p
示例使用相同的16 px大小。你发布了所有样式吗?你的图像显示sans-serif字体,但你的样式不包含font-family
,所以通常字体在大多数浏览器/操作系统上默认为衬线字体。如果你有更多的样式或者正在使用像Bootstrap这样的CSS框架,请更新你的问题以指定这一点。另一个想法是,当我缩放 windows 时,我会在大部分文字中看到预期的缩放比例,因为您使用的是
vw
-相对字号。一般段落文字是唯一 * 不会 * 缩放的文字。这可能就是您看到的内容?请尝试变更:致:
zzoitvuj3#
好吧,这可能是不相关的,但我有同样的问题。2事实是,我从头开始写HTML页面。3我设置了CSS基本规则,它们在移动的设备的flex元素中被破坏了。4我相信这和Ethan在这里问的问题相似。
在我的例子中,由于我从头开始编写HTML,我忘记了
head
HTML标记中的viewport
meta标记。在这个问题中找到了我的答案:Website elements and fonts are too small in mobile devices
希望这能对某人有所帮助!