0

En mi caso, quiero ponerle un tamaño maximo a unos iconos que coloque con boostrap, pero si le pongo font-size en % o vw se agrandan mucho, y si pongo en px cuando achico me quedan muy grandes, y me gustaria que no pasen de sierto tamaño al agrandar o achicar mi pagina. html:

<nav class="barraLateral">
  <section>
    <a href="#"><img src="./imagenes/Lnf.png" alt="LogoL"></a>
  </section>
  <section class="barraLE">
    <a href=""><i class="bi bi-house-heart-fill"></i></a>
    <a href=""><i class="bi bi-code-slash"></i></a>
    <a href=""><i class="bi bi-envelope"></i></a>
  </section>
  <section class="barraLR">
    <a href=""><i class="bi bi-linkedin"></i></a>
    <a href=""><i class="bi bi-github"></i></a>
    <a href=""><i class="bi bi-instagram"></i></a>
  </section>
</nav>

css:

.barraLE {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  margin-left: 30%;
}

.barraLE a {
  color: white;
  font-size: 40px;
}

1 respuesta 1

2

Para eso puedes usar la función clamp, cuyo primer valor es el minimo valor permitido, el segundo es el valor y el 3ro es el maximo permititdo

Por otro lado veo frecuentemente un error muy comun, que aclararé por las dudas. Las unidades relativas al font-size son relativas al font-size del padre, no al tamaño de este (ni al width ni al height)

Acá un ejemplo:

  • Los 2 primeros texto son del mismo tamaño 20px porque es el tamaño minimo definido en el clamp
  • Igualmente los 2 últimos, también son del mismo tamaño 30px, por es el máximo.

Es decir el texto solo puedes variar entre 20px y 30px

#padre1 { font-size:5px}
#padre2 { font-size:10px}
#padre3 { font-size:30px}
#padre4 { font-size:60px}

span{
 font-size:clamp(20px,2em,30px)
}
<div id="padre1"><span>AAA</span></div>
<div id="padre2"><span>AAA</span></div>
<div id="padre3"><span>AAA</span></div>
<div id="padre4"><span>AAA</span></div>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.