Cree fuentes receptivas en CSS
- Utilice el valor de la ventana gráfica para crear fuentes receptivas en CSS
- Utilice consultas de medios para crear fuentes receptivas en CSS
-
Utilice la función
calc()para crear fuentes receptivas en CSS -
Utilice la función
clamp()para crear fuentes receptivas en CSS
El artículo explica las formas de implementar fuentes receptivas solo con el uso de CSS. Presentaremos varias formas en que CSS y CSS3 modernos hacen que las fuentes parezcan legibles en dispositivos de diferentes tamaños de pantalla.
Utilice el valor de la ventana gráfica para crear fuentes receptivas en CSS
Una de las formas más fáciles de hacer que las fuentes respondan es cambiar el tamaño de las fuentes de acuerdo con el tamaño de la ventana gráfica o el tamaño de la ventana del navegador. Hay varias unidades de visualización, en relación con los ejes de la ventana del navegador, proporcionadas por CSS que son muy útiles para crear páginas web receptivas. Algunas unidades de ventana gráfica son vw, vh, vmin y vmax. Podemos obtener la información de estas unidades de las unidades CSS. Podemos usar estas unidades de ventana gráfica en lugar de em, px o pt para hacer las fuentes receptivas.
Por ejemplo, cree cada una de las etiquetas h1, h2 y p. Escriba un texto de su elección entre estas etiquetas. En CSS, establezca la propiedad font-size de las etiquetas h1, h2 y p en 5.9vw, 3.0vh y 2vmin respectivamente.
Cuando cambiamos el tamaño del navegador, la ventana del navegador cambia y el tamaño de fuente de los textos también cambiará en consecuencia. De esta manera, podemos usar las unidades de la ventana gráfica en el tamaño de fuente para crear una fuente receptiva en CSS.
Código de ejemplo:
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
h1 {
font-size: 5.9vw;
}
h2 {
font-size: 3.0vh;
}
p {
font-size: 2vmin;
}
Utilice consultas de medios para crear fuentes receptivas en CSS
Podemos usar las consultas de medios para crear fuentes receptivas en CSS. También podemos utilizar consultas de medios para cambiar el tamaño de fuente a una cierta altura / ancho del dispositivo. Usamos la palabra clave @media para escribir la consulta de medios.
Por ejemplo, establezca la propiedad font-size en 3em. A continuación, escriba la consulta de medios con la condición de max-width:320px. Luego, establezca la propiedad font-size en 2em.
Código de ejemplo:
body{
font-size: 3em;
}
@media only screen and (max-width: 320px) {
body {
font-size: 2em;
}
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
Aquí, el tamaño de la fuente se reducirá cuando se implemente el código anterior y se ejecute en dispositivos con un tamaño de pantalla inferior a 320px. La fuente se establece como 2em para dispositivos que tienen una altura inferior a 320px. Y las fuentes estarán en 3em para dispositivos que tengan un tamaño de pantalla superior a 320px.
El demérito de este método es que podríamos necesitar agregar más consultas de medios si el diseño comienza a romperse en dispositivos con un tamaño específico.
Utilice la función calc() para crear fuentes receptivas en CSS
Dado que la mayoría de los navegadores actuales admiten el método calc() en CSS, facilita la escritura de código receptivo. Además, este método también es más efectivo y logra la tarea sin ensuciar el código. Podemos usar la función calc() para hacer que el tamaño de la fuente responda. El resultado de la función es el valor de la propiedad.
Por ejemplo, establezca la propiedad font-size de la etiqueta body en la función calc(). Dentro de la función, escriba 0.75em + 1vw.
Código de ejemplo:
body {
font-size: calc(0.75em + 1vw);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
El tamaño de fuente variará a medida que cambie el valor de 1vw en dispositivos con diferentes tamaños de pantalla. Por lo tanto, podemos crear una fuente receptiva en CSS.
Utilice la función clamp() para crear fuentes receptivas en CSS
La función clamp() fija los valores entre los valores máximo y mínimo. La función toma tres parámetros como argumento, el primero es el valor mínimo, el segundo es el valor preferido y el último es el valor máximo permitido. Podemos usar la función clamp() para establecer cualquier propiedad como length, angle, percentage, number, etc. Podemos usar la función para hacer la fuente receptiva en CSS.
Código de ejemplo:
h1{
font-size : clamp(2rem, 10vw, 5rem);
}
<h1> Hey boy </h1>
<h2> Hey girl </h2>
<p> Hey kid </p>
En el ejemplo anterior, el valor 2rem es el tamaño de fuente mínimo permitido. Del mismo modo, el siguiente valor, 10vw, es el tamaño de fuente predeterminado y, el último, 5rem, es el tamaño de fuente máximo permitido. Aquí, debemos tener en cuenta que el valor en el medio debe ser relativo como en vw, ch o vh y no absoluto como, px y pt.
