Share
Las consultas de los medios son una parte vital del diseño web moderno, pero no siempre son perfectas. En este artículo vamos a echar un vistazo a la idea de "consultas de elementos"; Lo que muchos argumentan es el futuro del diseño web sensible.
El artículo de Ethan sobre Diseño web responsivo cambió la forma en que construimos sitios web, para siempre. Su artículo inspiró y fue rápidamente adoptado por diseñadores y desarrolladores web. Surgieron enfoques como “Mobile First”, “Desktop First” y “Device Agnostic”, desde entonces se han desarrollado patrones de diseño, nuevos estándares como el
Ya no construimos sitios web para tamaños de pantalla, navegadores o dispositivos en particular. En su lugar, los creamos para que sean igualmente agradables en cualquier dispositivo y en cualquier tamaño de pantalla. Lo hacemos utilizando "consultas de medios", sin olvidar la metaetiqueta de la ventana gráfica..
Las consultas de medios están diseñadas para permitirnos moldear reglas de estilo para un entorno específico. Uno de los usos más comunes de las consultas de medios es cambiar los estilos dentro de un cierto rango de anchos de ventana gráfica. El siguiente código, por ejemplo, oculta la barra lateral cuando se accede al sitio web a través de una ventana de hasta 720 px de ancho.
.site-sidebar display: flex; flex: 1 1 320px; @media (max-width: 720px) .site-sidebar display: none;
Las consultas de los medios evolucionaron, junto con los dispositivos, con varias características adicionales, como orientación y resolución. El siguiente ejemplo muestra cómo podríamos usar una de estas características para servir un tamaño de imagen más grande en una pantalla de alta resolución.
.site-logo a display: inline-block; fondo: url (images / logo.png) no-repetir; pantalla de @media y (resolución mínima: 2dppx) fondo: url (images/[email protected]);
Las consultas de medios se han convertido en un componente básico cuando se brinda una experiencia receptiva. Póngase al día leyendo estos artículos, tutoriales y consejos sobre cómo aprovechar las consultas de los medios de comunicación en nuestras publicaciones anteriores en Tuts +, así como en todo Internet..
Las consultas de los medios no son la bala de plata para cada situación en el diseño web sensible, de hecho, nunca fue pensado para ser así..
Hoy en día, hay una gran variedad de dispositivos en el mercado en varios tamaños y rasgos, que difuminan la línea entre "móvil" y "de escritorio" (te estoy mirando "portátiles híbridos"). Por este motivo, mantener la estética de un sitio web, una excelente experiencia de usuario y un rendimiento nunca ha sido tan difícil.
En Google IO 2015, Google permite a los desarrolladores consultar su sitio web en más de 100 dispositivos diferentes.Y una vez que agregue cosas como anuncios, tablas y contenido heredado a la mezcla, la situación puede ser aún peor. Muy pronto se encontrará con los aspectos "no tan buenos" de las consultas de medios..
Considere el siguiente ejemplo. Tenemos un componente de UI para mostrar el perfil de los miembros de nuestro equipo. Queremos utilizar este componente exacto en un par de lugares diferentes en nuestro sitio web. Este ejemplo muestra cómo la interfaz de usuario se presenta en una 780px ancho de la ventana.
En la página de "perfil de usuario", ponemos el avatar del usuario a la izquierda, y el nombre del usuario, así como la biografía a la derecha.
Diseño de perfil de usuario en el perfil de "Usuario".En la página de "equipo" en nuestro sitio web, sin embargo, el diseño cambia; la imagen de avatar del usuario ahora se coloca en la parte superior, y el nombre de usuario, así como la biografía, se encuentran debajo. El tamaño de fuente también puede ser un poco más pequeño..
Diseño del perfil de usuario en la página "equipo".Esta situación se puede arreglar con consultas de medios. Podemos, por ejemplo, escribir el CSS, como sigue:
/ ** * Perfil * / .team-profile text-align: center; .team-profile .bio margin-top: 20px; tamaño de fuente: 14px; @media (min-width: 480px) .team-profile text-align: left; pantalla: flexión; .team-profile .avatar flex: 0 0 120px; .team-profile .bio font-size: 16px; flex: 0 1 580x; / ** * Tarjeta de perfil. * / .team-profile-card text-align: center; .team-profile-card .bio margin-top: 20px; tamaño de fuente: 14px; / ** * Probablemente, algunas anulaciones * / .page .team-profile-card …
Es reparable, siempre y cuando usemos algunas clases de identificación adicionales: .perfil del usuario y .tarjeta de perfil de usuario.
Sin embargo, también va en contra de que nuestra interfaz de usuario sea un componente reutilizable; Una interfaz de usuario que se puede colocar en cualquier parte del sitio web, pudiendo adaptarse a su entorno..
En este ejemplo, queremos que el diseño de nuestro componente se adapte cuando se envuelve en un contenedor pequeño, en lugar de cuando se comprime por la ventana del navegador. Entonces, en lugar de confiar en el tamaño de la ventana del navegador para cambiar el diseño, ¿por qué no podemos hacerlo en el nivel de elemento?
La idea de consultas de elementos surgió a principios de 2012; Un par de años después, Responsive Web Design se convirtió en la metodología principal. Desafortunadamente, probablemente no había muchas razones convincentes para mencionar esto como un estándar web en ese momento; el mundo todavía se estaba acostumbrando a volver a ser blando..
@ianstormtaylor sí "consultas de elementos" ha aparecido una y otra vez
- Paul Irish (@paul_irish) 24 de enero de 2012
Las comunidades web comenzaron iniciativas por su cuenta. RICG (Responsive Issue Community Group), el mismo grupo que inició el
Las consultas de elementos funcionan de manera similar a las consultas de medios; excepto que escuchan el tamaño del elemento en lugar de la ventana gráfica del navegador. Esto nos permite construir un sistema de IU verdaderamente modular con la base de código DRY-er. Dado el mismo ejemplo, podríamos reescribir los estilos de nuestro componente UI con EQCSS, de la siguiente manera:
.perfil del equipo text-align: center; .team-profile .bio margin-top: 20px; tamaño de fuente: 14px; @elemento ".team-profile" y (min-width: 480px) .team-profile display: flex; .team-profile .avatar flex: 1 1 120px; .team-profile .bio text-align: left; tamaño de fuente: 16px; flex: 1 1 580x;
Aquí no nos importa cuál es el ancho de la ventana gráfica. Como se puede ver arriba, siempre que UI se estira a 480px o más amplio, mostramos el .avatar y el .bio lado a lado. Cuando el ancho de la interfaz de usuario se reduce abajo 480px dejamos que el .avatar y .bio Apilar y alinear el contenido al centro..
Solo para aclarar, no estoy diciendo que usar consultas de medios sea malo, en absoluto. Las consultas de los medios son maravillosas y hemos sido testigos de ello en muchos sitios web creados hoy. Las consultas de medios y las consultas de elementos ciertamente pueden coexistir. Sin embargo, hay muchos escenarios de diseño donde el uso de consultas de elementos tendría más sentido que el uso de consultas de medios.
Desafortunadamente, las consultas de elementos aún tienen un largo camino por recorrer antes de que finalmente pasen como un estándar web; Nuestra esperanza en esto descansa en todas las personas buenas de RICG..
Mientras esperamos, podemos explorar el potencial de las consultas de elementos a través de una biblioteca de JavaScript como EQCSS. Y eso es exactamente lo que vamos a hacer en el próximo tutorial. Manténganse al tanto!
Accentsconagua