Home-theater-designers
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
¿Qué son las 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 las 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 trabaja para una empresa con cientos de páginas web diferentes, esto resultará en un gran ahorro de tiempo.
Usar consultas de medios
Hay varias cosas diferentes que debe tener en cuenta al utilizar las consultas de medios: estructura, ubicación, rango y vinculación.
La estructura de las consultas de medios
Ejemplo de una estructura de consulta de medios
|_+_|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
Ejemplo de una consulta de medios con la única palabra clave
|_+_|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 única palabra clave se puede reemplazar con la palabra clave not y luego el estilo CSS en la consulta de medios anterior solo se aplicaría a la impresión y el 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.
Ejemplo de consulta de medios predeterminada
|_+_|La ubicación de consultas de medios
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 la etiqueta a la etiqueta del archivo HTML y crear la consulta de medios dentro de los parámetros de la etiqueta.
El método externo implica la creación de una consulta de medios en un archivo CSS externo y vincularlo a su archivo HTML a través de la etiqueta.
La gama de consultas 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 una consulta de medios. CSS tiene una regla de orden de precedencia. Cuando se utiliza 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 fondo diferente para las tabletas, podría pensar que simplemente podría agregar el siguiente código a su archivo CSS preexistente.
Ejemplo de consulta de medios de tableta
|_+_|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 son menos de 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).
Consulta de medios de tableta con ejemplo de rango
|_+_|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.
Vincular consultas de medios
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 la etiqueta de un archivo HTML, por lo que en lugar de tener una hoja de estilo masiva que contenga 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.
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.
Uso de consultas de medios en el ejemplo de etiqueta de enlace
|_+_|El código anterior debe colocarse en la 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, el estilo del archivo de la tableta se aplicará a todas las pantallas con un ancho entre 450px y 801px, y el estilo del archivo del teléfono inteligente se aplicará a todas las pantallas siguientes 451px.
¿Cómo sé si mi teléfono está intervenido?
Ahora tiene las herramientas para crear diseños adaptables
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
Cuota Cuota Pío Correo electrónico Cómo configurar una imagen de fondo en CSSCSS 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 Temas relacionados- Programación
- Desarrollo web
- Web Design
- CSS
Kadeisha Kean es desarrolladora de software Full-Stack y redactora técnica / tecnológica. Tiene la habilidad distintiva de simplificar algunos de los conceptos tecnológicos más complejos; produciendo material que puede ser fácilmente entendido por cualquier novato en tecnología. Le apasiona escribir, desarrollar software interesante y viajar por el mundo (a través de documentales).
Más de Kadeisha KeanSuscríbete a nuestro boletín
¡Únase a nuestro boletín de noticias para obtener consejos técnicos, reseñas, libros electrónicos gratuitos y ofertas exclusivas!
Haga clic aquí para suscribirse