Cómo Usar Consultas De Medios En Html Y Css Para Crear Un Sitio Web Receptivo

¿Quiere que su sitio web se vea genial en su dispositivo móvil? Es hora de aprender a usar consultas de medios en CSS.

Si va a desarrollar un sitio web/aplicación web, saber cómo crear un diseño receptivo es muy importante para su éxito.

En el pasado, crear sitios web que encajaran bien en una variedad de tamaños de pantalla era un lujo que los propietarios de sitios web tenían que pedir a sus desarrolladores. Sin embargo, el uso cada vez mayor de teléfonos inteligentes y tabletas ha creado la necesidad de un diseño receptivo en el mundo del desarrollo de software.

El uso de consultas de medios es la mejor manera de asegurarse de que su sitio web/aplicación web se vea exactamente como lo desea en cualquier dispositivo.

Comprender el diseño receptivo

En pocas palabras, el diseño receptivo es el uso de HTML/CSS para crear diseños de sitios web/aplicaciones web que se adaptan a diferentes tamaños de pantalla. En HTML/CSS, hay varias formas de lograr la capacidad de respuesta en el diseño de sitios web.

• Use unidades rem y em en lugar de píxeles (px)
• Establecer la Windows gráfica/escala de cada página web
• Uso de consultas de medios

¿Qué es una consulta de medios?

Las consultas de medios son una característica de CSS lanzada en la versión CSS3. La introducción de esta nueva función permite a los usuarios de CSS ajustar la visualización de las páginas web en función de la altura, el ancho y la orientación del dispositivo/pantalla (en modo horizontal o vertical).

Leer más: Hoja de trucos de atributos esenciales de CSS3

Las consultas de medios proporcionan un marco que le permite escribir código una vez y usarlo varias veces a lo largo de su programa. Puede que no parezca muy útil si está desarrollando un sitio web con solo tres páginas web, pero si está trabajando para una empresa con cientos de páginas web diferentes, puede ahorrarle mucho tiempo.

Uso de consultas de medios

Hay varias cosas a tener en cuenta al usar consultas de medios: estructura, ubicación, alcance y enlaces.

Estructura de consulta de medios

Ejemplo de estructura de consulta de medios

 
@media only/not media-type and (expression){ 
/*CSS code*/ 
}

La estructura general de una consulta de medios es:

• @media palabra clave
• palabra clave no/solo
• Tipo de medio (puede ser pantalla, impresión o audio)
• Palabra clave "y"
• expresión única entre paréntesis
• Código CSS encerrado entre llaves de apertura y cierre.

Temas relacionados: Formatear documentos para imprimir usando CSS

Ejemplos de consultas de medios usando una sola palabra clave

 
@media only screen and (max-width: 450px){ 
body{ 
background-color: blue; 
} 
}

El ejemplo anterior aplica el estilo CSS (específicamente el color de fondo azul) solo a pantallas de dispositivos con un ancho de 450 px o menos, por lo que es básicamente un teléfono inteligente. Puede cambiar la palabra clave "solo" por la palabra clave "no". Los estilos CSS en la consulta de medios anterior se aplicarán solo a la impresión y la voz.

Sin embargo, de forma predeterminada, las declaraciones de consulta de medios genéricas se aplican a los tres tipos de medios, por lo que no necesita especificar un tipo de medio a menos que tenga la intención de excluir uno o más.

Ejemplo básico de consulta de medios

 
/*design for smartphones*/ 
@media(max-width: 450px){ 
body{ 
background-color: blue; 
} 
}

Ubicación de consulta de medios

Las consultas de medios son propiedades CSS. Por lo tanto, solo se puede usar en lenguajes de estilo. Hay tres formas de incluir CSS en su código. Sin embargo, solo dos de estos métodos, CSS interno o externo, brindan una forma práctica de incrustar consultas de medios en su programa.

La forma interna es agregar una etiqueta de estilo a la etiqueta de encabezado de su archivo HTML y crear una consulta de medios desde la configuración de la etiqueta de estilo.

Una forma externa es crear una consulta de medios en un archivo CSS externo y vincularlo al archivo HTML a través de una etiqueta de enlace.

Ámbito de consulta de medios

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 las consultas de medios. CSS tiene reglas de precedencia. Al usar selectores de CSS, o consultas de medios en este caso, cada nueva consulta de medios agregada al archivo CSS anulará (o tendrá prioridad sobre) la consulta de medios anterior.

El código de consulta de medios predeterminado anterior se dirige a los teléfonos inteligentes (menos de 450 px de ancho), por lo que si desea establecer un fondo diferente para las tabletas, puede agregar el siguiente código a su archivo CSS existente:

Ejemplo de consulta de medios para tableta

 
/* design for tablets */ 
 @media(max-width: 800px){ 
 body{ 
 background-color: red; 
 } 
 } 

El único problema es que el color de fondo de la tableta es rojo y el color de fondo del teléfono inteligente también es rojo, porque 450 px y menos son menos de 800 px debido a la prioridad.

Una forma de resolver este pequeño problema es agregar una consulta de medios para tabletas en lugar de consultas de medios para teléfonos inteligentes. Este último ha sustituido al anterior y ahora tienes un smartphone con fondo azul y una tablet con fondo rojo.

Pero hay una mejor manera de implementar estilos separados para teléfonos inteligentes y tabletas sin preocuparse por las prioridades. Esta es una característica de las consultas de medios, conocida como especificaciones de alcance, que permite a los desarrolladores crear consultas de medios con un ancho (rango) máximo y mínimo.

Consulta de medios de tableta con rango de muestra

 
 /* design for tablets */ 
 @media(max-width: 800px) and (min-width:451){ 
 body{ 
 background-color: red; 
 } 
 } 

En el ejemplo anterior, no tendría sentido incluir una consulta de medios en una hoja de estilo, ya que el diseño de la tableta y el teléfono inteligente apunta a dos colecciones separadas de ancho.

Consulta de medios vinculante

Si no desea incluir consultas de medios en su código CSS, puede usar un método alternativo. La forma de hacerlo es utilizar una consulta de medios en la etiqueta de enlace del archivo HTML. Entonces, en lugar de usar una hoja de estilo masiva con preferencias de estilo para teléfonos inteligentes, tabletas y computadoras de escritorio, puede usar tres archivos CSS separados y escribir consultas de medios en sus enlaces. marca.

Las etiquetas de enlace son elementos HTML que se utilizan para importar estilos CSS desde hojas de estilo externas. Esta etiqueta tiene propiedades de medios que funcionan igual que las consultas de medios en CSS.

Uso de consulta de medios en el ejemplo de etiqueta de enlace

 !-- main stylesheet -- 
 link href="main.css" 
 !-- tablet stylesheet -- 
 link media="(max-width:800px) and (min-width:451px)" 
 href="tablet.css" 
 !-- smartphone stylesheet -- 
 link media="(max-width:450px)" href="smartphone.css" 

El código anterior debe colocarse en la etiqueta principal 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 y luego crear el diseño específico que desea para cada dispositivo.

Los estilos en el archivo principal se aplican a todas las pantallas de más de 800 px de ancho, los estilos en el archivo de la tableta se aplican a todas las pantallas entre 450 px y 801 px de ancho, y los estilos en el teléfono inteligente se aplican a todas las pantallas de menos de 451 px de ancho..

Ahora tienes las herramientas para crear diseños responsivos

Si ha leído este artículo, probablemente haya aprendido qué es el diseño receptivo y por qué es útil. Ahora puede identificar y usar consultas de medios en archivos CSS y HTML. También introduje la precedencia en CSS y vi cómo esto puede afectar el funcionamiento de las consultas de medios.

Crédito de la imagen: espacio negativo/ Pexels

Si quieres conocer otros artículos parecidos a Cómo Usar Consultas De Medios En Html Y Css Para Crear Un Sitio Web Receptivo puedes visitar la categoría Programación.