Tema 16 Diseño Adaptativo Con Media Queries

TEMA 16
Diseño adaptativo con Media Queries

Una de las primeras obsesiones de los diseñadores y programadores web es adaptar su
sitio web para que se vea en un mayor número posible de pantallas. La abundancia
de tipos de monitores (4:3, 16:9), las cambiantes resoluciones de smartphones, tablets y
demás hace que el trabajo se vuelva una obra de artesanía prácticamente. Pero una vez
más vamos a resolverlo de una forma fácil y didáctica.
Si usted tienes una pantalla ancha a la hora de crear tu página web, puedes olvidar que
algunas personas navegan con pantallas más pequeñas. Y ya ni siquiera hablo de los
navegadores para los teléfonos inteligentes, que son aún más estrecho.
Aquí es donde los media queries están involucrados. Se trata de reglas para cambiar el
diseño de un sitio en base a las características de la pantalla que accede a él. Usando esta
técnica, podemos crear un diseño que se ajusta automáticamente a la pantalla todos los
visitantes.
Usando Media Queries

Las Media Queries son parte del nuevo CSS3. No se trata de nuevas propiedades, sino
de reglas que se pueden aplicar en determinadas condiciones. En concreto, podrás
decir "Si la resolución de pantalla del visitante es menor que X, a continuación, aplicar las
siguientes propiedades CSS." Esto te permite cambiar el aspecto del sitio, bajo ciertas
condiciones: Puede aumentar el tamaño del texto, cambiar el color de fondo, la posición
del menú en determinadas resoluciones, etc.
Contrariamente a lo que pudiera pensarse, las media queries no se basan sólo en las
resoluciones de pantalla. Puedes cambiar el aspecto de tu sitio basándote en otros
criterios como el tipo de pantalla (smartphone, TV, proyector...), el número de colores, la
orientación de la pantalla (vertical u horizontal), etc. Las posibilidades son infinitas.
Las media queries se ejecutan en todos los navegadores, incluido Internet Explorer desde
la versión 9 (IE9).
CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 1

Aplicando Media Queries
Como hemos visto, las Media Queries son las reglas que indican cuándo debe aplicar
propiedades CSS. Hay dos formas de utilizarlas:
 cargar una hoja de estilo css diferente dependiendo de la regla (por ejemplo,
"Si la resolución es inferior a 1280px de ancho, cargue el archivo baja-
resolucion.css ");
 Escribir las reglas directamente en el archivo css habitual (por ejemplo, "Si la
resolución es inferior a 1280px de ancho, sigue las propiedades CSS indicadas a
continuación").
Cargar una hoja de estilo diferente

¿Te acuerdas de la etiqueta que, en nuestro código HTML usábamos para cargar un
archivo CSS?
<link rel="stylesheet" href="style.css" />
Podemos añadir un atributo media, en el que vamos a escribir la regla que se aplica al
archivo que desea cargar. He aquí un ejemplo:
<link rel="stylesheet" media="screen and (max-width: 1280px)"

href="baja-resolucion.css" />
Como puedes ver, el HTML podría proponer varios archivos CSS: un defecto (que se
carga en todos los casos) y otros más que se cargarán adicionalmente sólo si se aplica la
regla correspondiente.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<link rel="stylesheet" href="style.css" /> 
<link rel="stylesheet" media="screen and (max-width:
1280px)" href="baja-resolucion.css" /> 
<title>Media queries</title>
</head>
Cargando la reglas directamente en la hoja de estilos

Otra técnica, que muchos programadores prefieren, por razones prácticas, es escribir
estas reglas en el mismo archivo CSS, como de costumbre.
En este caso, la regla se escribe en el archivo CSS así:

@media screen and (max-width: 1280px)
{
/ * Escribe tus propiedades CSS aquí * /
}
Las reglas disponibles

Hay muchas reglas para construir Media Queries. Aquí tienes las principales:
 color: la gestión del color (bits / píxel).

 height: la altura de la zona de visualización (ventana).
 width: el ancho del área de visualización (ventana).
 device-height: altura del dispositivo.
 device-width: anchura del dispositivo.
 orientation: la orientación del dispositivo (vertical u horizontal).
 media: permite seleccionar el tipo de salida de la pantalla. Algunos de los valores
posibles:
o screen: pantalla clásica;
o handheld: dispositivo móvil;
o print: impresión;
o tv: televisión;
o projection: proyectores;
o all: todos los tipos de pantalla.
Podemos añadir el prefijo min- o max- antes de la mayoría de estas normas. De este
modo, min-width significa "Anchura mínima" o max-height "Altura máxima", etc . La
diferencia entre width y el device-width se percibe especialmente en los navegadores
móviles en los teléfonos inteligentes, hablaremos más adelante. Las reglas se pueden
combinar con las siguientes palabras:
 only: sólo.
 and: y.
 not: no.
Ejemplos de media queries que te servirán para comprender su uso.
/ * En pantallas, cuando la anchura de la ventana es de un máximo

de 1280px * /
/ * En todos los tipos de pantalla cuando el ancho de la ventana

está entre 1024px y 1280px * /
@media all and (min-width: 1024px) and (max-width: 1280px)

/ * En la TV * /
@media tv
/ * En todas las pantallas de orientación vertical * /

@media all and (orientation: portrait)
Testear los Media Queries

Las Media Quieres se utilizan principalmente para adaptar el diseño del sitio para
diferentes anchos de pantalla.
Vamos a hacer una prueba sencilla: vamos a cambiar el color y el tamaño si la ventana es
de aproximadamente 1.024 píxeles de ancho. Para este ensayo, vamos a utilizar el
segundo método, que es escribir la regla directamente en el mismo archivo CSS:
/* Párrafos en azul por defecto */

p
{
color: blue;
}
/* Nuevas reglas si la ventana es como máximo de 1024px de ancho */

{
p
{
color: red;
background-color: black;
font-size: 1.2em;
}
}
En nuestro CSS, lo primero que pedimos es que texto de los párrafos se escribe en azul,
como hasta ahora hemos hecho. Sin embargo, hemos añadido una Media Query que se
aplica a todas las pantallas cuya anchura no exceda 1024px. En el interior, se aplicaron las
reglas CSS en los párrafos a escribir más grande y rojo.
Para comprobar el resultado, puedes crear una página, aplicarle este CSS y cambiar el
tamaño de la ventana de tu navegador para ver si funciona correctamente
Media Queries y navegadores móviles

Como probablemente sabes, las pantallas de los teléfonos inteligentes son mucho más
estrechas que las pantallas normales (sólo tienen unos pocos cientos de píxeles de
ancho). Para adaptarse, los navegadores móviles visualizan el sitio en "zoom out", lo que
permite una visión de toda la página. El área de visualización simulada se llama la ventana
gráfica: la anchura de la ventana del navegador en el móvil.

Con CSS Media Queries, si delimitamos la orientación de la pantalla max-width en un
móvil, comparará el ancho se especifica con el de su ventana. El problema que se
producen variaciones en la ventana gráfica en función del navegador móvil utilizado. Estos
son los anchos por ventana utilizados:
<table class="table table-striped">

<tbody><tr>
<td width="150">Navegador</td>
<td width="176">Ancho de la ventana por
defecto</td>
</tr>
<tr>
<td>Opera Mobile</td>
<td>850 pixeles</td>
</tr>
<tr>
<td>iPhone Safari</td>
</tr>
<tr>
<td>Android</td>
</tr>
<tr>
<td>Windows Phone 7</td>
</tr>
</tbody></table>
IPhone se comporta como si la ventana estuviese 980 px de ancho, mientras que Android
se comporta como si la ventana fuese de 800px.
Para hacer referencia a los teléfonos inteligentes, en lugar de utilizar la propiedad max-
width, puede valer la pena utilizar max-device-width: el ancho del dispositivo. Los
dispositivos móviles de no más de 480 píxeles de ancho, pueden ser agrupados con esta
media querie:
@media all and (max-device-width: 480px)

{
/ * Las CSS para móviles aquí * /
}
Puedes cambiar el ancho de la ventana gráfica del navegador móvil con una etiqueta
meta se inserta en el encabezado (<head>) del documento:
<meta name="viewport" content="width=320" />

Tambien puedes utilizar esta etiqueta para cambiar la forma en que el contenido de su
página se organiza en el móvil. Para una fácil lectura sin recurrir al zoom, puede solicitar
que la vista es la misma que la anchura de la pantalla:
<meta name="viewport" content="width=device-width" />

Tema 16 Diseño Adaptativo Con Media Queries

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

Tema 16 Diseño Adaptativo Con Media Queries

Cargado por

Copyright:

Formatos disponibles

TEMA 16

Diseño adaptativo con Media Queries

Usando Media Queries

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 1

Cargar una hoja de estilo diferente

<link rel="stylesheet" href="style.css" />

<link rel="stylesheet" media="screen and (max-width: 1280px)"

Cargando la reglas directamente en la hoja de estilos

En este caso, la regla se escribe en el archivo CSS así:

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 2

Las reglas disponibles

 color: la gestión del color (bits / píxel).

Ejemplos de media queries que te servirán para comprender su uso.

/ * En pantallas, cuando la anchura de la ventana es de un máximo

/ * En todos los tipos de pantalla cuando el ancho de la ventana

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 3

/ * En todas las pantallas de orientación vertical * /

Testear los Media Queries

/* Párrafos en azul por defecto */

/* Nuevas reglas si la ventana es como máximo de 1024px de ancho */

Media Queries y navegadores móviles

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 4

<table class="table table-striped">

@media all and (max-device-width: 480px)

<meta name="viewport" content="width=320" />

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 5

<meta name="viewport" content="width=device-width" />

CURSO PROGRAMADOR WEB HTML5 CSS3 |TEMA 16 | 6

También podría gustarte