Cómo cambiar el tamaño de la fuente utilizando consultas de medios

Un sitio web receptivo altera su apariencia dependiendo del dispositivo en el que lo está mostrando. Con el fin de hacer que un sitio web responda, utilice las consultas de CSS Media. Estas consultas le permiten cambiar una característica particular de su sitio web en función del ancho o la resolución de pantalla del dispositivo. Por ejemplo, puede ocultar un elemento basado en el tamaño de la pantalla o cambiar el tamaño de fuente del contenido del sitio web, etc. Aquí mostraremos cómo puede alterar el tamaño de fuente del texto que aparece en su sitio web utilizando consultas de medios.

Cómo cambiar el tamaño de la fuente utilizando consultas de medios

Hacer que el texto responda en un sitio web se denomina tipografía de fluido, lo que significa que su texto cambiará su tamaño en función del tamaño de la pantalla del dispositivo. Aquí le presentaremos dos métodos diferentes para hacer que el texto de su sitio web responda.

Método 1

El primer método que se puede usar para que su texto responda es mediante el uso de consultas de medios. Aquí hay un ejemplo.

Html

Hacer que el texto responda en un sitio web se denomina tipografía de fluido, lo que significa que su texto cambiará su tamaño en función de la pantalla
tamaño del dispositivo.

Aquí hemos declarado un párrafo en el que vamos a demostrar cómo cambiar el tamaño de la fuente utilizando una consulta de medios.

CSS

pag.texto
Color de fondo: Azure;
relleno: 15px;

En primer lugar, estamos utilizando algunos CSS básicos para proporcionar algo de color de fondo y acolchado al párrafo.

CSS

@Media Screen y (Min-Width: 700px)
pag.texto
tamaño de fuente: 25px;

La primera consulta aplicada establece que si el ancho de pantalla mínimo es de 700 px o más ancho, el tamaño de fuente del párrafo será de 25px.

CSS

@Media Screen y (Max-Width: 699px)
pag.texto
tamaño de fuente: 16px;

Y esta última consulta establece que si el ancho máximo de la pantalla es 699px o menor, el tamaño de fuente del párrafo será de 16 px o más amplio.

Producción

Cuando el ancho de la pantalla es de 700 px o más amplio.

Cuando el ancho de la pantalla es 699px y menor.

El tamaño de fuente se cambió correctamente utilizando consultas de medios.

Método 2

El segundo enfoque que puede usar para cambiar el tamaño de su texto es utilizando el ancho de la ventana gráfica. Usando esto, el texto se alterará según el tamaño del navegador.

Html

Haciendo su texto receptivo

Hacer que el texto responda en un sitio web se denomina tipografía de fluido, lo que significa que su texto cambiará su tamaño en función de la pantalla
tamaño del dispositivo.

En el código anterior, hemos definido un encabezado y un párrafo, y aplicaremos el ancho de la ventana gráfica en estos para alterar su tamaño de fuente con respecto a la ventana del navegador.

CSS

H2
tamaño de fuente: 9VW;

Aquí hemos establecido el tamaño de fuente del rumbo a 9VW. La unidad VW significa ancho de la ventana gráfica.

CSS

pags
tamaño de fuente: 4VW;

En lo que respecta al tamaño de fuente del párrafo, el tamaño de la fuente se ha establecido en 4VW.

Producción

El método funciona correctamente.

Conclusión

Con el fin de hacer que el texto aparezca en las páginas web que responde, puede usar consultas de medios. En la consulta de medios, especifique el tamaño de fuente del texto en cualquier ancho particular y el tamaño de fuente se alterará de acuerdo con el tipo de dispositivo. Otro método para realizar esta tarea es utilizar el ancho de la visión. Este método simplemente requiere que asigne un cierto tamaño de fuente al texto en la unidad 'VW'. Ambos métodos se han discutido en esta publicación con la ayuda de ejemplos relevantes.