Hay alguna manera de hacer que el tamaño de la letra sea autoescalable según el tamaño de la pantalla?
He probado de poner en rem, en % pero no me funciona.
Como extensión a lo que ha comentado el compañero Error404 comentarte dos cosas.
Puedes controlar el tamaño de la fuente con el ancho de tu pantalla:
.mifuente {
font-size: 2vw;
}
O lo puedes hacer con el alto:
.mifuente {
font-size: 2vh;
}
En casos mas concretos no tienes alternativa a usar @media
para dependiendo de tu alto y tu ancho hacer una cosa u otra.
@media (max-width: 200px) and (max-heigth: 160px) {
.mifuente {
font-size: 20px;
}
}
Puedes utilizar vw
(view port) units.
font-size: 3.5vw;
Estas tomarán la proporción en función del ancho de tu pantalla.
Por otro lado, también existen vh
que toman la proporción tomando como referencia la altura.
Por último, puedes usar las media queries. Si no quieres que te realice saltos tan grandes (dependiendo de la pantalla que tengas te la pondrá a unos tamaños u otros) puedes indicar directamente mediante pixeles que font-size quieres que tenga la fuente para anchuras concretas de la pantalla.
Ejemplo:
@media (max-width:700px) and (min-width:500px) {
.texto{
font-size: 12px;
}
}
Lo que haría el ejemplo anterior sería poner tu fuente a 12 píxeles, cuando tu pantalla tenga un mínimo de 500 píxeles y un máximo de 700px. Puedes ajustarlo a tus necesidades y puedes usar todos los que quieras.
Veo que no lo han nombrado en las otras respuestas y es que generalmente se requiere un límite máximo / mínimo al momento de usar las unidades de medida vw
y vh
, teniendo en cuenta que ya hay pantallas con varios miles de píxeles de ancho y otras muy pequeñas, todo esto asumiendo que no sea un diseño fluido o mejora progresiva.
Si bien bastaría un par de media queries para establecer los valores mínimos y máximos, podemos usar también calc()
para fijar un valor mínimo e ir agregando unidades de vw
o vh
según aumenta la resolución:
font-size: calc(1rem + 1vw);
En este ejemplo el tamaño mínimo será de 1rem y se le irá agregando el 1% del valor del ancho del viewport actual.
Para el límite superior podemos utilizar un media query "normal":
@media (min-width: 200rem) {
p {
font-size: 3rem;
}
}
Por si acaso, puedes usar cualquier otra unidad de medida distinta a rem.
Puedes probar ponerlas en em
aunque dependerá de la fuente que tenga la pantalla , si por ejemplo :
La fuente base está a : 8px.
1 em = 8px , 2 em = 16px y así sigue el progreso.
Luego tienes la opción de ponerlo en pt
, pero se comenta que es una mala idea , lo que hace el pt
es depender del tamaño de la pantalla del cliente.
fuente
Lo que se aconseja hoy en día, las buenas prácticas es hacerlo todo en em
ya que es lo más cómodo y estandar.
Otra opción es poner un botón en cuanto a accesibilidad que lo que haga , sea aumentar el tamaño de la letra , por medio de un botton js , que lo que haga sea aumentar un porcentaje el tamaño base y así lo que haces , con los `em' es aumentar el tamaño porque todos son relativos al tamaño base de la fuente impuesta en la plantilla.
*{
font-size: 8px;
}
Por ejemplo , se suele establecer así , por lo general suele coger también este tamaño.
Nota : Se suele pone el *
señalas que quieres que todo tenga ese tamaño , pero luego individualmente puedes personalizarlo.
*
que es demasiado genérico (significa cualquier elemento). Tambien se puede usar así .midiv * {
Commented
el 4 nov. 2016 a las 9:59
font-size:80%
para los párrafos lo que haces es darle un tamaño del 80% respecto al tamaño que heredes de los elementos padre, si no has definido ningún tamaño será del tamaño por defecto que pone el navegador, generalmente 16px, por lo que tendrás una letra de 12.8px. Losem
funcionan más o menos igual y losrem
usan el elemento raiz como referencia, no el padre como losem
y los%