Cómo utilizar consultas de medios en HTML y CSS para crear sitios web receptivos

Si desea desarrollar sitios web / aplicaciones web, saber cómo crear diseños receptivos es esencial para su éxito.

En el pasado, la creación de sitios web que se adaptaban bien a diferentes tamaños de pantalla era un lujo que los propietarios de sitios web tenían que solicitar a un desarrollador. Sin embargo, el aumento en el uso de teléfonos inteligentes y tabletas ha hecho que el diseño receptivo sea una necesidad en el mundo del desarrollo de software.

El uso de consultas de medios es sin duda la mejor manera de asegurarse de que su sitio web / aplicación web aparezca exactamente como lo desea en cada dispositivo.

Comprensión del diseño receptivo

En pocas palabras, el diseño receptivo se ocupa del uso de HTML / CSS para crear un diseño de sitio web / aplicación web que se adapta a varios tamaños de pantalla. En HTML / CSS hay algunas formas diferentes de lograr la capacidad de respuesta en el diseño de un sitio web:

• Usar unidades rem y em en lugar de píxeles (px)
• Configuración de la ventana gráfica / escala de cada página web
• Usar consultas de medios

Una consulta de medios es una característica de CSS que se lanzó en la versión CSS3. Con la introducción de esta nueva función, los usuarios de CSS obtienen la capacidad de ajustar la visualización de una página web en función de la altura, el ancho y la orientación de un dispositivo / pantalla (modo horizontal o vertical).

Leer más: La hoja de trucos de propiedades esenciales de CSS3

Las consultas de medios proporcionan un marco para crear código una vez y usarlo varias veces en todo el programa. Esto puede no parecer tan útil si está desarrollando un sitio web con solo tres páginas web, pero si estás trabajando para una empresa con cientos de páginas web diferentes; esto resultará ser un tiempo enorme ahorrador.

Hay varias cosas diferentes que debe tener en cuenta al utilizar las consultas de medios: estructura, ubicación, rango y vinculación.

@media only / not media-type y (expresión) {
/ * Código CSS * /
}

La estructura general de una consulta de medios incluye:

• La palabra clave @media
• La palabra clave no / única
• Un tipo de medio (que puede ser de pantalla, impreso o hablado)
• La palabra clave "y"
• Una expresión única entre paréntesis
• Código CSS encerrado en un par de llaves abiertas y cerradas.

Relacionado: Uso de CSS para dar formato a documentos para imprimir

@media solo pantalla y (ancho máximo: 450px) {
cuerpo{
color de fondo: azul;
}
}

El ejemplo anterior aplica el estilo CSS (específicamente un color de fondo azul) solo a las pantallas de los dispositivos que tienen un ancho de 450 px o menos, básicamente, a los teléfonos inteligentes. La palabra clave "única" se puede reemplazar con la palabra clave "no" y luego el estilo CSS en la consulta de medios anterior solo se aplicaría a la letra impresa y al habla.

Sin embargo, de forma predeterminada, una declaración de consulta de medios general se aplica a los tres tipos de medios, por lo que no es necesario especificar un tipo de medio a menos que el objetivo sea excluir uno o más de ellos.

/ * diseño para smartphones * /
@media (ancho máximo: 450 px) {
cuerpo{
color de fondo: azul;
}
}

Una consulta de medios es una propiedad de CSS; por lo tanto, solo se puede utilizar dentro del lenguaje de estilo. Hay tres formas diferentes de incluir CSS en su código; sin embargo, solo dos de esos métodos proporcionan una forma práctica de incluir consultas de medios en sus programas: CSS interno o externo.

El método interno incluye agregar el

El método externo implica crear una consulta de medios en un archivo CSS externo y vincularlo a su archivo HTML a través del etiqueta.

Ya sea que las consultas de medios se utilicen a través de CSS interno o externo, hay un aspecto importante del lenguaje de estilo que puede afectar negativamente el funcionamiento de una consulta de medios. CSS tiene una regla de orden de precedencia. Cuando se usa un Selector de CSS, o en este caso una consulta de medios, cada nueva consulta de medios que se agrega al archivo CSS anula (o tiene prioridad sobre) la anterior.

El código de consulta de medios predeterminado que tenemos arriba apunta a los teléfonos inteligentes (450px de ancho y menos), por lo que si desea establecer un diferentes antecedentes para tabletas, podría pensar que simplemente podría agregar el siguiente código a su archivo CSS preexistente.

/ * diseño para tablets * /
@media (ancho máximo: 800px) {
cuerpo{
color de fondo: rojo;
}
}

El único problema es que, debido al orden de precedencia, las tabletas tendrían un color de fondo rojo y los teléfonos inteligentes ahora también tendrían un color de fondo rojo porque 450px y menos es inferior a 800px.

Una forma de resolver este pequeño problema sería agregar la consulta de medios para tabletas antes que las de teléfonos inteligentes; el último anularía al primero y ahora tendría teléfonos inteligentes con un color de fondo azul y tabletas con un color de fondo rojo.

Sin embargo, existe una mejor manera de lograr estilos separados para teléfonos inteligentes y tabletas sin preocuparse por el orden de precedencia. Esta es una característica de las consultas de medios conocida como especificación de rango, donde el desarrollador puede crear una consulta de medios con el ancho máximo y mínimo (el rango).

/ * diseño para tablets * /
@media (ancho máximo: 800px) y (ancho mínimo: 451) {
cuerpo{
color de fondo: rojo;
}
}

Con el ejemplo anterior, la ubicación de las consultas de medios dentro de una hoja de estilo se vuelve irrelevante ya que el diseño para tabletas y teléfonos inteligentes apunta a dos colecciones de ancho separadas.

Si no desea incrustar consultas de medios en su código CSS, existe un método alternativo que puede utilizar. Este método implica el uso de consultas de medios en el etiqueta de un archivo HTML, por lo que en lugar de tener una hoja de estilo masiva que contiene las preferencias de estilo para teléfonos inteligentes, tabletas y computadoras: puede usar tres archivos CSS separados y crear sus consultas de medios en la etiqueta.

los La etiqueta es un elemento HTML que se utiliza para importar estilos CSS desde una hoja de estilo externa. Esta etiqueta tiene una propiedad de medios que funciona de la misma manera que lo haría una consulta de medios en CSS.

 hoja de estilo principal 

 hoja de estilo de tableta 
href = "tablet.css">
 hoja de estilo de smartphone 

El código anterior debe colocarse en el

etiqueta de su archivo HTML. Ahora todo lo que necesita hacer es crear tres archivos CSS separados con los nombres de archivo main.css, tablet.css y smartphone.css; luego, cree el diseño específico que desee para cada dispositivo.

El estilo del archivo principal se aplicará a todas las pantallas con un ancho superior a 800px, se aplicará el estilo del archivo de la tableta. a todas las pantallas con un ancho entre 450px y 801px, y el estilo en el archivo del teléfono inteligente se aplicará a todas las pantallas siguientes 451px.

Si llegó al final de este artículo, pudo aprender qué es el diseño receptivo y por qué es útil. Ahora puede identificar y utilizar consultas de medios en archivos CSS y HTML. Además, conoció el orden de precedencia en CSS y vio cómo podría afectar el funcionamiento de sus consultas de medios.

Crédito de la imagen: Espacio negativo /Pexels

Cómo configurar una imagen de fondo en CSS

CSS es una poderosa herramienta para diseñar páginas web. Aprender a colocar una imagen de fondo le enseña muchos conceptos básicos de CSS.

Leer siguiente

Sobre el Autor