Diseño Responsivo

El diseño responsivo es un diseño que responde al tamaño del dispositivo desde el que se está visualizando la web, adaptando las dimensiones del contenido y mostrando los elementos de una forma ordenada y optimizada sea cual sea el soporte.

La tendencia en el mundo de las páginas web es que el usuario cada vez más acceda desde dispositivos móviles como teléfonos o tablets. las estadísticas de 2012 arrojan un porcentaje esclarecedor: el 40% de los usuarios que visitaron webs el año pasado lo hicieron desde un dispositivo móvil y un 25% de las compras en internet se realizan ya desde el teléfono.

Ante estos datos, se entiende claramente la necesidad de tener una web que se visualice correctamente desde cualquier soporte. En Trazada, utilizamos el diseño responsivo para conseguirlo.

Aplicando el diseño responsivo desde la creación de una nueva web se consiguen varios objetivos.

  Se reducen costes de desarrollo. Teniendo un solo diseño web optimizado

para todos los dispositivos en vez de varios diseños independientes, uno para cada soporte.

Baja el rebote de usuarios. Una buena parte de los usuarios que abandonan una página web al entrar desde un dispositivo móvil es porque no pueden visualizar correctamente el contenido. Con el diseño responsivo, el usuario disfrutará siempre de una buena experiencia de navegación.

Se mejoran los resultados de conversión. Al tener una página que se vé de forma optimizada para móviles y tabletas, el porcentaje de usuarios que adquieren un producto o envían un formulario es mayor.

Permite desarrollar una estrategia de marketing sobre la web unificada para todos los soportes, haciendo que esta sea más sólida y mejorando su efectividad.

Desde que esta tendencia se consolidó en el mundo de la web, los equipos de desarrollo tanto de Trazada como de QDQ incorporamos las buenas prácticas del diseño responsivo a nuestro sistema de producción, de forma que ya no concebimos el nacimiento de una nueva página web sin que esta se visualice perfectamente en todos los dispositivos.

Viewport

El Viewport es una de las etiquetas más representativas de la web móvil, que nos permite configurar cómo debe interpretar una página el navegador web para móviles.

Inicialmente creada por Apple para definir diversas directrices sobre cómo el iPhone debe renderizar un documento web, el viewport es una etiqueta META que se ha convertido en un estándar en el momento actual. La mayoría de dispositivos móviles la soportan en la mayor gama de sistemas operativos, lo que la convierte en un integrante imprescindible para cualquier página que esté pensada para verse también en dispositivos en movilidad.

El viewport es uno de esos conceptos que cuesta más de explicar que de entender, o por lo menos a mí me lo parece. Quizás tampoco sea el interlocutor más adecuado para hablar de esta etiqueta META, pero alguien la tiene que tratar con el detalle que se merece en el Manual para el diseño web en móviles. Así que ¡vamos manos a la obra!

Básicamente, sirve para definir qué área de pantalla está disponible al renderizar un documento, cuál es nivel de escalado que puede realizar el usuario, así como si el navegador debe mostrarla con algún zoom inicial. Todo ello se indica a través de varios parámetros en la propia etiqueta META, como veremos en el presente artículo. 

Entender el viewport

Comencemos por entender qué es el viewport. Y como veremos, se trata de un concepto bien sencillo, pues corresponde con el área que está disponible en la pantalla del navegador.

Aunque el viewport es algo propio de navegadores para móviles y cobra sentido justamente cuando estemos pensando en estos dispositivos con pantallas reducidas, podemos entenderlo primero en el contexto de un navegador de escritorio.

El viewport en un navegador en cualquier ordenador con sistemas tradicionales es igual al área de la ventana, o mejor dicho, al área disponible para renderizar el documento web (o sea, le restamos toda la interfaz del navegador, como botones, barra de direcciones, barra de menús, barras de desplazamiento, etc.) Dicho de otro modo, es el área útil donde se mostrará la página web.

¿Sencillo? Espero que sí. Pero ahora pensemos en móvil. Quizás sepas que cuando se ven las páginas en una dispositivo a menudo se reducen los contenidos, para conseguir que se ajusten al reducido espacio de la ventana del navegador. Es decir, para mostrar toda la página en el espacio disponible de la pantalla del dispositivo, se hace un escalado de la web, de modo que se ve todo en pequeñito.

Esta es la manera en la que se vería el sitio actual de DesarrolloWeb.com que está optimizado para ordenadores de escritorio y no tiene definida ninguna etiqueta viewport.

Bien, pues el viewport cuando estamos hablando de dispositivos móviles, no corresponde al tamaño real de la pantalla en píxeles, sino al espacio que la pantalla está emulando que tiene. Por ejemplo, en un iPhone, aunque la pantalla en vertical tiene unas dimensiones de 320 píxeles, en realidad el dispositivo está emulando tener 980 píxeles. Esto hace que ciertas páginas web (optimizadas para navegadores de escritorio) quepan en una pantalla de 320 píxeles, porque en realidad el Safari para iOS está emulando tener un espacio de 980 píxeles.

Pues bien, el viewport en estos casos es el espacio que el dispositivo emula tener, no la resolución real en píxeles que tiene la pantalla. Lo interesante en este caso es que los desarrolladores somos capaces de alterar el viewport que viene configurado en el navegador, algo que resulta totalmente necesario si queremos que nuestra página se vea correctamente en dispositivos de movilidad.  

Esta imagen tiene la misma foto que se muestra en la pantalla de un iPhone. Supongamos que la foto mide 320 píxeles de ancho. En la parte de la derecha tendríamos la foto a tamaño real, que es como se vería si tuviéramos un viewport configurado a 320 píxeles de ancho. Pero al verla en un iPhone con un viewport configurado a 980 píxeles de ancho, la imagen se verá bastante más pequeña.

Configurar la etiqueta Viewport

Cuando Safari de iOS renderiza un documento web, hace un escalado de los contenidos para que las páginas diseñadas para sistemas de escritorio se vean más o menos bien en un teléfono móvil. Como pudiste apreciar en la primera imagen de este artículo, al verse el sitio web de DesarrolloWeb.com, los

contenidos aparecían muy pequeñitos y ello nos obliga a hacer zoom para poder leerlos. Sin embargo, nosotros podemos configurar el viewport para decirle a Safari, o cualquier otro navegador para móviles, qué debe hacer en este sentido.

Nota: Insistimos en que, cuando hablamos de Safari, en realidad nos referimos a cualquier navegador para móviles, ya sean en dispositivos iOS, Android, Blackberry, etc., ya que la etiqueta viewport es soportada actualmente por la mayor gama de sistemas para móviles. En realidad, decimos Safari solamente porque fue el primero en utilizarla.

Es altamente recomendable que se altere la etiqueta viewport para conseguir que tu navegador se comporte como tú deseas, especialmente en el caso de las páginas que estamos diseñando para verse correctamente en pantallas pequeñas. Para ello disponemos de los siguientes parámetros en la etiqueta META.

Width: anchura virtual (emulada) de la pantalla o anchura del viewport.

Height: altura virtual de la pantalla o anchura del viewport.

Initial-scale: la escala inicial del documento.

Minimum-scale: la escala mínima que se puede poner en el documento.

Maximum-scale: la escala máxima configurable en el documento.

User-scalable: si se permite o no al usuario hacer zoom.

Como puedes ver, en la META viewport no se indica simplemente las dimensiones de la pantalla emulada, sino también el nivel de zoom que se puede estar configurando inicialmente y el nivel de zoom que se permitiría tener.

Nota: recordar que el usuario puede hacer zoom en la página web, con el gesto típico en la pantalla táctil. Al hacer zoom, realmente no estaría cambiando el viewport, sino la escala con la que se visualiza el documento.

En esta tercera imagen tenemos un viewport de 320 píxeles, sin embargo hemos definido un "initial-scale" de 1.5, por eso la imagen que medía realmente 320 píxeles de ancho no cabe en la pantalla del iPhone.

Un ejemplo de etiqueta viewport sería el siguiente:

<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1">

La anchura y la altura del viewport deben quedar más o menos claros, pues se refieren simplemente a las dimensiones fijas del viewport inicial. Sin embargo, esas dos medidas no se suelen indicar, siendo más habitual definir únicamente la anchura con el valor "device-width", que es una medida que hace referencia a la anchura de la pantalla del dispositivo.

Así que con width=device-width conseguimos que el viewport sea igual a la anchura real de la pantalla del dispositivo, de modo que no se tratará de emular una pantalla mayor de lo que realmente es y veremos los píxeles reales.

Con initial-scale=1 conseguimos que no se haga zoom sobre el documento. Es bien simple, el contenido de la web no se transformará, ni se agrandará, ni se hará menor.

Con user-scalable=no conseguimos que el usuario no pueda hacer zoom en la página, con lo que siempre se mantendrán las medidas que nosotros hemos definido al construir la web.

Nota: desactivar el zoom con user-scalable=no nos facilita tener siempre la escala a como nosotros hayamos definido en la etiqueta META viewport, lo que puede simplificarnos la vida a la hora de definir cómo se debe ver una web. Sin embargo, estaremos limitando la posibilidad de que el usuario haga zoom puntualmente para agrandar o empequeñecer alguna cosa. Por todo ello, cabe sopesar bien qué es lo que queremos permitir y si realmente definiendo un maximum-scale y minimum-scale, estamos acotando bien el uso de nuestra web.

 

Conclusión

El viewport requiere un estudio pormenorizado y algo de práctica para entender bien sus posibilidades y la manera de configurarlo, de modo que se optimice la forma con el que nuestra web se debe de ver en los dispositivos móviles. Como se ha podido comprobar, hay muchas y diversas posibilidades para explorar.

Esperamos que en este artículo te hayamos sacado de dudas, sin embargo posiblemente podríamos estar hablando del viewport durante un largo rato para resolver todas las necesidades de los desarrolladores y las dudas de aquellas personas que están diseñando webs optimizadas para móviles o adaptables a todos los dispositivos (responsive design).

Media Queries

Los Media Queries, son una excelente forma de entregar diferentes estilos para diferentes dispositivos, y proveer la mejor experiencia para cada tipo de usuario. Como parte de la especificación CSS3, los Media Queries expanden el rol del atributo media, que controla como se aplican los estilos. Por ejemplo: se ha vuelto una práctica común por años el uso de una hoja de estilos por separado para imprimir sitios web al especificar media = “print”. Los Media Queries, llevan esta idea al siguiente nivel, al permitir a los diseñadores asignar estilos basados en las propiedades de un dispositivo, como el ancho de pantalla, orientación y así sucesivamente.

Las Figuras 1- 3, muestran los Media Queries en acción. De hecho muestran el mismo sitio web, visto en una computadora de escritorio, en una tableta y en un iPod Touch.

Figura 1. Al ser vista en una computadora de escritorio, el sitio tiene un layout de dos columnas.

En la versión de escritorio, la página tiene un ancho fijo y un layout de dos columnas, pero cuando el mismo sitio es visto en una tableta, la barra lateral se desplaza debajo del contenido principal.

<link href="css/phone.css" rel="stylesheet" type="text/css"

media="only screen and (max-width: 400px)" >

Figura 2. El layout cambia a una sola columna para ajustarse a una pantalla más angosta de una tableta.

Al ser visto el sitio en un iPod Touch, el menú se re-acomoda y las imágenes reducen su escala. Los diferentes estilos se aplican dependiendo el dispositivo con el uso de Media Queries.

Figura 3. Los Media Queries definen nuevos estilos al sitio para ajustarse a una pantalla mucho más pequeña.

Este artículo da una visión general de los Media Queries, incluyendo ejemplos que pueden ser de utilidad para el desarrollo de un sitio web.

Nota: Asegurate de ver los videos en Adobe TV: CSS3 Media Queries con Dreamweaver y Como los Media Queries pueden facilitar el diseño para dispositivos móviles y diferentes tipos de pantallas.

Ejemplos de Media Queries

Un ejemplo simple de un Medya Query puede verse así:

<link href="css/phone.css" rel="stylesheet" type="text/css"

media="only screen and (max-width: 400px)" >

En este ejemplo, el Media Query, ha sido agregado a la etiqueta. Como podrás ver más adelante, puedes usar Media Queries con hojas de estilo. El atributo media es dónde reside el Query. Este otro dice:

only screen and (max-width: 400px)

El significado puede ser obvio: aplica esta hoja de estilo sólo a un dispositivo con una ventana de navegador no mayor a 400 pixeles. Puedes observar por el nombre del archivo phone.css que este Query en particular, esta hecho para estilos de un dispositivo móvil. Ahora que has visto un ejemplo, vamos a profundizar en los Media Queries y las características de un dispositivo que se pueden utilizar para controlar como se aplican los estilos.

Soporte y características de Media Queries

Los Media Queries tienen soporto en Internet Explorer 9+, Firefox 3.5+, Safari 3+, Opera 7+, así como en los smartphones más modernos y otros dispositivos móviles. Aunque versiones viejas de IE no soporten los Media Queries, puedes -y deberías- empezar a usarlos ahora. Más adelante se discute como lidiar con versiones viejas de navegadores.

Tabla 1 lista de características de dispositivos que se pueden usar con Media Queries.

Feature Value Min/MaxDescription

width Length YesWidth of display area

height Length YesHeight of display area

device-width Length Yes Width of device

device-heightLength Yes Height of device

orientationportrait orlandscape

NoOrientation of device

aspect-ratio Ratio (w/h) Yes Ratio of width to height, expressed as two integers separated by a

slash (e.g., 16/9)

device-aspect-ratio

Ratio (w/h) YesRatio of device-width to device-height

color Integer Yes

Number of bits per color component (if not color, the value is 0)

color-index Integer Yes

Number of entries in the output device’s color lookup table

monochrome Integer Yes

Number of bits per pixel in the monochrome frame buffer (if not monochrome, the value is 0)

resolution Resolution Yes

Density of pixels of output device, express as integer followed by dpi(dots per inch) or dpcm (dots per centimeter)

scanprogressiveor interlace

NoScanning process used by TV devices

grid 0 or 1 No If set to 1, the device is grid-based, such as a teletype

terminal or phone display with only one fixed font (all other devices are 0)

Tabla 1. Características de dispositivos para ajustar condiciones en Media Queries.

Las primeras cinco características de la Tabla 1 (width, height, device-width, device-height y orientation) son las más útiles. Puedes agregar un prefijo a la mayoría de las características con min- y max- para indicar un valor mínimo y máximo, como min-with y max-width. La columna Min/Max en la Tabla 1, indica que características se pueden modificar de esta manera.

Ancho, ancho de dispositivo y ventana.

Quizás uno de los aspectos más confusos de los Media Queries, es la diferencia entre width y height y sus valores equivalentes predefinidos por device-. En el caso de computadoras portables y de escritorio, la diferencia es fácil de entender: width y height se refieren al tamaño de la ventana del navegador, mientras que device-width y device-height se refieren a las dimensiones del monitor. No todo mundo corre su navegador a pantalla completa, así que tienes que utilizar width y height.

Los navegadores de dispositivos móviles, ocupan toda la pantalla, así que podrías esperar que width y device-width sean lo mismo. Desafortunadamente no siempre es el caso. La mayoría de los smartphones, incluyendo Android, iPhone y Windows Phone 7, ajustan width a una vista nominal de aproximadamente 1000 pixeles de ancho (en un iPhone y iPod Touch, de 980 pixeles, Windows Phone 7 usa 1024). La Figura 4 muestra como un iPod Touch despliega normalmente la página de ejemplo en las figuras previas.

Figura 4. Por default, los dispositivos modernos, escalan los sitios web para encajar en una ventana hipotética.

Aunque la hoja de estilos este vinculada con la página utilizando Media Queries, para proporcionar diferentes estilos dependiendo de los valores min-width y max-width, el iPod Touch, ignora los estilos y despliega la versión de escritorio por que su ventana se considera de 980 pixeles de ancho.

Para hacerlo más confuso, el iPhone, iPod Touch y iPad, no toman en cuenta la orientación para calcular el ancho, mientras que otros dispositivos si.

Afortunadamente hay una solución simple para esta confusión. La nueva etiqueta de Apple, que ha sido adoptada ampliamente por otros fabricantes de dispositivos móviles, se ha incorporado a la especificación que muy probablemente apruebe la World Wide Web Consortium (W3C). Para asegurar un campo de juego con todos los dispositivos móviles que soporten Media Queries, sólo agrega la siguiente línea de código en la etiquetade cada página:

<meta name="viewport" content="width=device-width, initial-scale=1">

Esto le dice a un dispositivo móvil que trate una ventana al mismo ancho del ancho físico del dispositivo. Es más, le dice al iPhone, iPod Touch y iPad que tome en cuenta la orientación para calcular el ancho. Como resultado, puedes usar width con la seguridad que significa lo que realmente es.

Nota: Muchos dispositivos móviles, particularmente el iPhone 4 y iPad 2, tienen pantallas de alta resolución con una densidad de pixel (resolución) mayor a una computadora de escritorio o una laptop. Esto no afecta como calculas el tamaño en pixeles dentro de los CSS. La especificación CSS, dice: si la densidad de pixel del dispositivo, es muy diferente de una computadora, el navegador, debe re-escalar los valores de los pixeles. Algunos desarrolladores, ahora se refieren a medidas en pixeles como CSS pixels.

Como escribir Media Queries

Para agregar un Media Querie al atributo media, tienes que ajustar una o más condiciones con las características de la Tabla 1. Especificas el valor para una característica y después dos puntos, de la misma forma que una propiedad de CSS. Cada condición esta envuelta en paréntesis y se agrega a la declaración con la palabra and. Por ejemplo:

"media="screen and (min-width: 401px) and (max-width: 600px)"

Los Media Queries son Booleanos: sólo pueden ser verdaderos o falsos. Si la condición es verdadera, se aplica el estilo; si es falsa, será ignorada.

Algunas características media, como color, monochrome y grid, se pueden usar como condiciones sin un valor específico. Por ejemplo, la siguiente línea apunta al color de todos los elementos desplegados.

media="screen and (color)"

Especificaciones alternativas

No existe la palabra clave or para especificar características media alternativas. En cambio, se enlistan alternativas separadas por coma, de esta forma:

media="screen and (min-width: 769px), print and (min-width: 6in)"

Esto se aplica a pantallas más anchas de 769 pixeles o dispositivos de impresión con un ancho de papel menor a 6 pulgadas.

Especificar condiciones negativas

Para especificar condiciones negativas, puedes preceder la declaración media con la palabra clave “not” de esta forma:

media="not screen and (monochrome)"

Puedes usar “not” frente a una condición individual. La palabra clave debe ir al inicio de una declaración para negarla por completo. El ejemplo precedente aplica a todos los dispositivos excepto de pantallas monocromáticas.

Esconder Media Queries de navegadores viejos

La especificación de Media Queries también provee la palabra only, que pretende esconder los Media Queries de navegadores viejos. Al igual que not, la palabra clave debe ir al inicio de la declaración. Por ejemplo:

media="only screen and (min-width: 401px) and (max-width: 600px)"

Los navegadores que no reconocen Media Queries, esperan una lista separada por comas de media types, y la especificación dice que se debería truncar cada valor, inmediatamente antes del primer caracter no alfanumérico que no sea un guión. Así que un navegador viejo debería interpretar el ejemplo precedente de esta forma:

media="only"

Como no existe ningún media type only, el estilo es ignorado. De igual manera, un navegador viejo, deberá interpretar lo siguiente como media=”screen”:

media="screen and (min-width: 401px) and (max-width: 600px)"

En otras palabras, deberá aplicar las reglas del estilo a todos los dispositivos, incluso aunque no sepa que son los Media Queries. Desafortunadamente, IE 6-8 falla al implementar la especificación correctamente. En lugar de aplicar los estilos a todos los dispositivos, ignora por completo la hoja de estilos.

A pesar de este comportamiento, aún se recomienda agregar el prefijo only a los Media Queries, si deseas esconder todos los estilos de otros navegadores menos comunes.

Tratando con versiones más viejas de Internet Explorer

La falta de soporte para Media Queries en IE 6 hasta IE 8 no es un problema. Simplemente crea un set básico de estilos para todos los navegadores que no usen Media Queries, y utiliza Media Queries para ofrecer una mejor experiencia para visitantes con navegadores más modernos.

Alternativamente, puedes usar una condicional de comentario para Internet Explorer y una serie de reglas para versiones viejas de IE, como estas:

<!--[if lt IE 9 & !IEMobile]>

<link href="iestyles.css" rel="stylesheet" type="text/css">

<![endif]-->

Uso de Media Queries con @import y @media

Adicionalmente a los Media Queries en las etiquetas , al vincular una hoja de estilos externa, se pueden usar con @import y @media. La sintaxis básica es la misma. Por ejemplo, lo siguiente importa una hoja d estilo y aplica los estilos a dispositivos con una pantalla no mayor a 400 pixeles de ancho.

@import url("phone.css") only screen and (max-width:400px);

Los Media Queries, se pueden usar dentro de una hoja de estilos como esta:

@media only screen and (max-width:400px) {

#navbar {

float: none;

width: 400px;

}

}

Prueba de Media Queries

Probar tu código es importante. Para tabletas y smartphones se complican las pruebas ya que idealmente deberías tener una serie dispositivos a tu disposición. Por suerte, puedes probar la mayoría de los Queries sin poseer un dispositivo específico. Siempre es mejor tener algo real enfrente, sin embargo, para el propósito de este artículo, con el uso de un navegador bastará para entender como funcionan los Queries.

El ZIP que acompaña este artículo, contiene un archivo de ejemplo (mediaqueries.html) con tres diferentes diseños vinculados. Puedes utilizar el ejemplo para continuar con la siguiente prueba de tamaños. Con la ventana del navegador completamente abierta, se puede ver el diseño básico del sitio (ver Figura 1). Haz más pequeña la ventana del navegador y puedes observar los

cambios mientras pasas por las dimensiones de diferentes dispositivos. Mientras recorres las dimensiones específicas en el código, el estilo de cambiar al de una tableta (Figura 2) o un celular (Figura 3). La imagen de encabezado se hace pequeña para tabletas por ejemplo; los siguientes módulos toman un flujo diferente. Para el estilo de celular, la imagen central desaparece, es sustituida por un menú más grande de botones verticales.

El navegador verifica los Media Queries cada vez que cambia el tamaño de la ventana del navegador o cuando volteas el celular a de una orientación vertical a una horizontal.

Media Queries en Dreamweaver CS5.5

Dreamweaver CS5.5 mejoró el soporte para Media Queries, desde que Adobe introdujo la actualización 11.0.3. El nuevo cuadro de diálogo para Media Queries, te ayuda a mantener tus Media Queries para una sola página o para un sitio completo (ver Figura 5).

Puedes acceder al cuadro de diálogo Media Queries de cualquiera de los siguientes lugares:

Modify > Media Queries

Panel Multiscreen Preview > Boton Media Queries

Menú dropdown Multiscreen > Media Queries

Opciones del menú del panel CSS Styles

Menú contextual del panel CSS Styles

Figura 5. Cuadro de diálogo Media Queries en Dreamweaver CS5.5

Con el uso de este cuadro de diálogo podrás:

Crear múltiples Media Queries.

Vincular Media Queries a la página actual, que añade vínculos a uno o varios archivos CSS.

Crear un archivo de ancho de sitio de Media Queries, que vincule a un solo y centralizado archivo CSS que importe otros archivos CSS específicos para cada dispositivo.

En el uso de un archivo de ancho de sitio de Media Queries, puedes vincular archivos existentes CSS o crear nuevos desde el mismo cuadro de diálogo. Incluso puedes crear comentarios arriba del query con lo que quieras agregar como descripción.

Adicionalmente, puedes escoger agregar la etiquetaal documento, que forze al dispositivo reportar sus dimensiones actuales, en lugar del tamaño del valor

nominal del viewport. Seleccionar esta opción ayuda a prevenir escalas no deseadas por malos reportes de tamaño.

Nota: Por ahora, el cuadro de diálogo de Media Queries sólo lee y escribe Queries con al menos un valor min-width y max-width. El cuadro de diálogo sólo edita los valores min- y max-. Puedes editar manualmente otros parámetros, pero min-width y max-width son los valores más comunes enfocados a dispositivos.

Ajustes predeterminados y definición de un sitio

El cuadro de diálogo Media Queries incluso provee una opción de presets en la parte inferior del área de lista. Selecciona estos presets y Dreamweaver crea de manera automática:

Media Queries para una tableta, celular y computadoras de escritorio.

min-width y max-width con valores iniciales comunes.

El botón de Default Presets provee una forma rápida de iniciar con Media Queries.

Otra manera conveniente de gestionar un archivo de ancho de sitio, es a través del cuadro de diálogo Site Setup. Ahora existe un campo llamado Site-wide Media Query File, en Advanced Settings > Local Info, que especifica el archivo de ancho de sitio. El archivo listado aquí, aparece como la opción cada vez que abres el cuadro de diálogo de Meida Queries. Para un nuevo archivo (o existente) todo lo que tienes que hacer es seleccionar esa opción para aplicar el archivo de ancho Media Query a la página actual.

Nota: Cambiar este archivo, no actualizará de manera automática todos los archivos del sitio.

El cuadro de diálogo Media Queries, ofrece una gran forma de simplificar la creación y gestión de tus Media Queries.

Media Queries son la mejor forma de focalizar dispositivos con diferentes estilos. Como se muestra en la parte superior, no se usan únicamente para smartphones, también se pueden usar para controlar el estilo de cualquier pantalla.