Cómo crear una fuente receptiva en CSS
La capacidad de respuesta es un factor esencial en las aplicaciones web. Los desarrolladores hacen que los diseños, imágenes y divs respondan en páginas web; Sin embargo, solo hay unos pocos que piensan en hacer la capacidad de respuesta de las fuentes. Porque cuando la página se cambia de un dispositivo a otro, como desde el escritorio al móvil, puede alterar la legibilidad de fuente. Para hacer que las fuentes sean visibles, se debe agregar el factor de respuesta.
Este artículo explicará cómo crear fuentes receptivas usando CSS.
Cómo crear una fuente receptiva en CSS?
Para crear una fuente receptiva en CSS, utilizaremos los siguientes métodos:
-
- Unidades de ventana de ventas gráfica
- Preguntas de los medios
- Función Clamp ()
Avancemos y exploremos cada método individualmente!
Método 1: Uso de las unidades de la ventana gráfica para crear fuentes receptivas en CSS
El área visible de una página de un navegador se conoce como ventana gráfica. En CSS, algunas unidades están relacionadas con él, poco conocidas como "unidades de ventana de ventas gráfica". Estas unidades son útiles para hacer que las cosas respondan y mejorar la visibilidad con respecto a un espectador.
Aquí hay cuatro unidades de ventanas gráficas que se describen a continuación:
| Valores | Descripción |
| VW | VW representa el ancho de la visión. Hace que los elementos respondan en modales de ancho con respecto a una página. El 1% de la página es equivalente a 1 VW. |
| VH | VH representa la altura de la visión. Hace que los elementos respondan en modales de altura con respecto a una página. El 1% de la página es equivalente a 1 VH. |
| vmin | vmin representa el mínimo. Se utiliza para especificar la altura o el ancho mínimo de la ventana gráfica con respecto a un elemento. |
| vmax | VMAX representa el máximo de la vista. Se utiliza para especificar la altura o ancho máximo de la ventana gráfica con respecto a un elemento. |
Tomemos un ejemplo para reconocer el funcionamiento de la unidad de la ventana gráfica.
Ejemplo
En nuestro archivo HTML, escriba algún texto dentro del " Html Pista de Linux CSS Método 2: Uso de consultas de medios para crear fuentes receptivas en CSS En CSS, "preguntas de los medios"Ayuda a aplicar diferentes condiciones de estilo en elementos específicos. Es un conjunto de reglas que solo se puede aplicar si la condición definida es verdadera. En el desarrollo, las consultas de los medios a menudo se usan para hacer que los elementos o los diseños respondan con respecto a los dispositivos/tipos de medios. Cuando la propiedad del tamaño de la fuente se coloca dentro del conjunto de reglas @Media, logra los resultados deseados. Ejemplo Establezca el ancho mínimo de la página como "799px" usando "@medios de comunicación"Y agregue el elemento dentro de este conjunto de reglas. Esto indica que la regla definida solo se aplicará si el ancho de la página es igual o superior a 799px. Ahora, especifique el "tamaño de fuente"Propiedad como"20px". Esto hará que la fuente sea más grande que su tamaño normal. CSS Método 3: Uso de Clamp () para crear fuentes receptivas en CSS El "abrazadera()La función se utiliza para especificar un valor mínimo y máximo fijo. En otras palabras, se define comúnmente como un rango inicial y final para un valor específico. La función Clamp () proporciona un gran control sobre los elementos relacionados con su capacidad de respuesta. Ejemplo Usar "tamaño de fuente"Propiedad a lo largo del valor"abrazadera (10px, 2.5VW, 30px)"Cuando el 10px es el valor mínimo, 30px es el máximo y el 2.5VW es el valor actual de la fuente seleccionada. Esta función hará que la fuente responda bajo los límites definidos. CSS Conclusión Para crear una fuente receptiva ","unidades de ventana de ventas gráfica","preguntas de los medios" o "Función Clamp ()" puede ser usado. Hay cuatro unidades de ventanas gráficas VW, VH, VMIN y VMAX que ayudan a crear fuentes receptivas. Además, CSS @Media también se usa para aplicar diferentes condiciones de estilo a elementos específicos. La función Clamp () también se puede utilizar para hacer que las fuentes respondan. En este artículo, hemos cubierto cómo crear fuentes receptivas en CSS.
En el archivo CSS, especifique el "tamaño de fuente"Propiedad con el valor"2.5VW". Esto hará que la fuente responda con respecto al ancho de la página.pag
tamaño de fuente: 2.5VW;
Guarde su código y pruebelo en su navegador:@Media (Min-Width: 799px)
pag
tamaño de fuente: 20px;
Producciónpags
tamaño de fuente: abrazadera (10px, 2.5VW, 30px);
Producción
Hemos descrito tres métodos eficientes para crear una fuente receptiva en CSS.