El uso de la etiqueta meta viewport

En el mundo de la web móvil la etiqueta meta viewport se ha convertido en un elemento esencial, básico en los últimos tiempos. Inicialmente introducida por Apple en su navegador Safari para iPhone, rápidamente fue adoptada por otros navegadores hasta hacerse habitual en todos los OS móviles. Esta etiqueta busca dar una serie de directrices a los navegadores para que rendericen adecuadamente la web.

Hay que ponerse un poco en situación: cuando aparecieron los primeros smartphones no había webs adaptadas para dispositivos móviles, y pasó tiempo hasta que las hubo (a día de hoy todavía hay muchas páginas que no se visualizan correctamente). ¿Solución? Que el teléfono “emule” una pantalla más grande y la web original se redimensione a ese tamaño. La idea es buena ¿El problema? Bueno, que era una solución temporal para aquel momento, pero que en la actualidad se queda coja. Este sistema que nos muestra una pantalla reducida hace que si hemos hecho una maquetación responsiva con media queries la cosa no acabe de funcionar. Para eso está meta viewport, para establecer el ancho, el alto o el zoom de la página.

La meta viewport utiliza una serie de pares de claves=valores para definir diversos comportamientos del navegador a la hora de renderizar la web:

<meta name="viewport" content="
	width = [tamaño en pixels | device-width ],
	height = [tamaño en pixels | device-height],
	initial-scale = float mayor que 0.1,
	minimum-scale = float mayor que 0.1,
	maximum-scale = float mayor que 0.1,
	user-scalable = [yes | no]
">

<!--Un ejemplillo real tras la teoría-->
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

Muy bien ¿y para qué vale cada una?:

Bueno, width lógicamente para definir el ancho de la pantalla. Podéis definir un ancho fijo, lo cual en términos generales viene a ser un epic fail. En cambio si usáis device-width esta ya se adaptará directamente al dispositivo.

Sobre heigth lo mismo, sólo que en este caso se define el alto. En la práctica no se me ocurre quién querría definir un alto estático, pero existir existe.

Para regular qué zoom tendrá por defecto la página está initial-scale, a la cual le tienes que dar un valor a partir de 0.1, siendo el valor 1 el equivalente a no tener zoom (es decir, menos de uno reduce y más de 1 amplía).

La pareja maximum-scale y minimum-scale nos permiten definir cual será el zoom máximo y el mínimo que pueda aplicar el usuario. Como arriba, 1 es igual a que se vea tal cual, sin zoom.

Finalmente user-scalable lo que nos permite es definir si queremos que el usario pueda hacer zoom o no. Lo mejor es dejarlo en yes, ya que no es buena idea poner limitaciones al user, y mucho menos en el caso del zoom, ya que podría tratarse de alguien con problemas de visión que necesite ampliar la página para poder leerla. Con el maximum y el minimum scale tres cuartos de lo mismo, piensa bien qué hace si vas a poner límites.

En fin, con esto ya tienes otro paso para mejorar tus diseños web adaptados a dispositivos móviles.

Análisis de eMobc Lander, servicio para crear webs móviles con html5

Creo que alguna vez en el pasado hablé del framework libre para desarrollo móvil eMobc. Basado en plantillas, cuya estructura y contenido se definen a través de un xml, nos permite crear de forma sencilla y sin conocimientos de programación apps móbiles en HTML5 o nativas para Android e iOS.

Ahora ofrecen un nuevo servicio, eMobc Lander. Este nos permite crear apps móviles en HTML5 y alojarlas en su nube.

El sistema de creación es sencillísimo, en serio, tanto como hacerse un blog en WordPress o Blogger. Tras registrarte llegas a un panel donde puedes crear varias páginas, con cuatro pasos definidos:

  1. Configuration: A su vez tiene cuatro secciones. En Social Media podéis incluir enlaces a redes sociales, en Templates elegir una plantilla, en SEO añadir título, descripción, palabras clave, autor… y en Domain elegís el dominio de vuestra app.
  2. Content: Aquí está la chicha, desde este paso metéis contenido a vuestra app. Puede ser de todo tipo: audio, video, fotos, html local, una web, una fuente rss… incluso tiene un chat.
  3. Appearance: Elige tu icono, el logo, fotos, colores de fuentes, fondos, menús… en fin, desde aquí puedes meterle mano a la maquetación para modificar tu plantilla.
  4. Statistics: Este paso ya no forma parte de redacción, simplemente es un módulo con estadísticas donde podremos ver el número de visitas, qué pantallas han visto y cuántas conversiones hemos obtenido.

En fin, hasta aquí la parte buena: es muy fácil de usar y logra resultados muy atractivos en poco tiempo, es muy productivo. En cosa de media hora hice esto esta mañana.

Claro está, tenía que haber puntos negros como en cualquier servicio: el primero es que al trabajar con plantillas se pierde flexibilidad respecto a un desarrollo puro y duro, cosa que era de esperar. El segundo… que el servicio gratuito está limitado a 1000 visitas al mes. Pagando 19 euros al mes podrás conseguir aumentar el límite hasta las 5000 visitas mensuales y además podrás usar tu propio dominio. Y finalmente hay un plan de 39 euros mensuales que te permite visitas ilimitadas, eliminar el branding de eMobc e insertar publicidad para monetizar tu aplicación.

Llegados a este punto debes analizar si te interesa pagar un plan, si vas a superar o no el número de visitas y si te será más rentable pagar el precio de uno de sus planes o, por contra, encargar un app a una empresa. Todo depende del uso que quieras dar a tu aplicación web. En todo caso se trata de una herramienta cómoda que no está de más probar y que para ciertas cosas es muy válida.

CSS3 Box Shadow: sombras sin usar imágenes

Seguimos otra vez con truquillos de CSS3 para vuestra web. Mientras me desquicio usando un teclado de silicona para escribir (cosa incómoda donde las haya) vamos a comentar el uso de la propiedad box-shadow de CSS3. Como siempre, ojo con IE que es puñetero cuando se trata de trabajar con stándares.

En su uso básico box-shadow necesita al menos tres parámetros, si bien acepta hasta cinco.

  • Desplazamiento horizontal: Define la posición horizontal de la sombra respecto al elemento al que se la aplicamos. Si le enviamos un valor positivo la sombra se situará a la derecha del elemento. Si el valor es negativo se situará a la izquierda.
  • Desplazamiento vertical: Define la posición vertical de la sombra. Si recibe un valor positivo la sombra se situará debajo del elemento, y con uno negativo encima.
  • Radio de desenfoque: Cuanto mayor sea, más transparente será la sombra. En caso de 0 la sombra será totalmente nítida. Se trata de un valor opcional y 0 es su valor por defecto.
  • Radio de dispersión: Cuanto mayor sea, mayor dispersión tendrá la sombra. Es opcional y el valor por defecto es cero. En ese caso el tamaño será igual al desenfoque.
  • Color: Finalmente el color que tendrá la sombra. Es el tercer valor obigatorio.
  • Inset: Existe un parámetro más, que es este inset. Si lo incluimos al principio hará que la sombra en lugar de estar en el exterior se sitúe en el interior del elemento..

La sintaxis sería como en este ejemplo:

/*Sombra gris abajo derecha*/
.sgad{
    box-shadow: 5px 5px 2px #666;
}

/*Sombra azulada arriba izquierda muy dispersa*/
.saaid{
    box-shadow: -5px -5px 5px 14px #99C;
}

/*Sombra interna gris*/
.sig{
    box-shadow: inset 0 0 10px #666;
}

Si queréis una buena serie de ejemplos y trucos los podéis encontrar en este enlace. Y recordad, ojo con el Explorer.

Zoom sobre texto con CSS3 usando transiciones

Otra nueva entrada sobre las virtudes de CSS3, en este caso vamos a hacer una pequeña introducción a las transiciones creando un código que nos permita que la letra de un párrafo aumente de tamaño cuando el ratón esté sobre ella.

Para ello por un lado tendremos que definir la transición sobre el elemento a modificar y luego la modificación cuando se produzca el evento.

Lo primero sería así:

.aumenta {
    font-size: 1.1em;
    width: 300px;
 
    -moz-transition: font-size 500ms linear 0s; 
    -webkit-transition: font-size 500ms linear 0s;
    -o-transition: font-size 500ms linear 0s;
    transition: font-size 500ms linear 0s;
}

Explicación: tras definir el tamaño del texto para la clase aumenta (1.1 em) definimos la transición. Hay varios métodos para la transición, así que he usado la propiedad shorthand de transition. El primer parámetro (font-size) es para especificar a qué propiedad se aplicará la transición, el segundo el tiempo que tardará, el tercero que se hará siempre a la misma velocidad (linear) y el cuarto que se haga sin delay.

Y ahora que tenemos la transición definida para todos los navegadores (ojo!!! Explorer 9 no soporta todavía transiciones, dice Bill Gates que igual para la 10) toca definir cómo se transformará el texto cuando esté sobrevolado por el ratón:

.aumenta:hover{
    font-size:1.6em;
}

Definimos que en el evento hover la fuente pase a ser más grande. Con esto ya tenemos nuestra transición lista.

Escalar imagen con CSS3 al hacer hover

Bueno, una minientrada rápida:

¿Necesitas que una imagen se agrande cuando pases el cursor por encima (o encoja, que también se puede)? Tradicionalmente la cosa sería hacerlo con javascript, pero ahora sólo con CSS3 es posible. En el siguiente ejemplo verás como hacer que la imagen crezca un 20%:

img:hover{ 
    -webkit-transform: scale(1.2);
    -moz-transform: scale(1.2);
    -o-transform: scale(1.2);
    -ms-transform: scale(1.2);
    transform: scale(1.2)
}

La idea es usar transform scale() y pasarle el tamaño que queremos darle como parámetro. Por cuestiones de compatibilidad hemos añadido los métodos concrectos para webkit, mozilla, opera y explorer. Cuestiones a tener en cuenta: Pues la primera, no pasarse ampliando para que la imagen no pierda definición en exceso. La segunda, ten en cuenta tamaños de márgenes y padding para que al crecer no te desplace el resto de elementos.

Truquito CSS fácil y rápido para este día de carnaval.

Cinco frameworks a tener en cuenta para desarrollo web

Soy evangelista de jQuery, lo sabéis, estoy enamorado, tando de jQuery (sobre todo para frontend), jQueryUI (este mejor para backend) o jQueryMobile. Es fácil de usar, productivo y libre, por lo que merece la pena usarlo. Pero no todo en esta vida es jQuery, por lo que hoy voy a hablar de cinco frameworks que os pueden interesar:

  • backbone.js: Con una documentación muy completa, este proyecto está siendo una de las estrellas de los frameworks javascript de los últimos dos años. Además de un catálogo de eventos y un API bastante entendible, el atractivo de backbone.js es que nos permite implementar el patrón Model-View-Controller en nuestra apliación de javascript. Sí, MVC en el lado del cliente. Piensa todo el código que se aprovechará, y la independencia que ganarás sobre el marcado.
  • Image Mapster:: En este caso nos encontramos con un plugin de jQuery para crear interacción con las imágenes. ¿Quieres un mapa donde haya un enlace sobre cada provincias? ¿quieres unas siluetas en negro que al sobrevolarlas con el ratón muestren la foto de la persona? Echa un ojo a la página de demos y hazte una idea de las posibilidades de este framework.
  • QUnit: Y si arriba hablábamos de implementar el patrón MVC en Javascript ¿por qué no hacer tests unitarios? QUnit es un proyecto de los creadores de jQuery, en principio pensado para testear su propio código, y que han liberado para uso y disfrute de la comunidad.
  • Canvas Query: Usar el elemento Canvas de HTML5 con sintaxis de jQuery. Eso es lo que nos ofrece Canvas Query, una herramienta que facilitará la vida del desarrollador que se lance a trastear con Canvas. Principalmente está pensado para el desarrollo de juegos en HTML5, donde puede tornarse una enorme ayuda a la hora de manipular sprites, jugar con paletas de colores…
  • Junior: Y termino con un framework para la creación de apps móbiles en HTML5. He de decir que ayer me encontré uno que me gustaba más, trasteando por la web, pero que no apunté el nombre… por lo que le he perdido la pista. En todo caso, este Junior puede ser una buena alternativa a jQueryMobile, dándonos una presentación diferente, más atractiva. Implementa varias librerías, como la antes citada backbone.js.

Y una cosa que me pregunto ¿realmente hacen falta tantos frameworks de maquetaciones tipo grid y metro? Los hay a patadas en los últimos tiempos.

Tres consejos para el diseño responsivo

Había dejado un poco tiradas las traducciones de Web Designer Wall tras haber hecho dos sobre diseño responsivo y media queries. Ahora voy con el tercer artículo (que curiosamente era el primero que leí) sobre cómo hacer una página con diseño responsivo en tres cómodos pasos.

El primer paso es desactivar la propiedad que hace que en algunos navegadores móviles el tamaño de la página se reduzca al de la pantalla (se reduzca a saco, sin adaptar nada más, dando como resultado muchas veces páginas inusables):

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

Bueno, se me olvidaba comentar que como en todas las entradas de esta web hay una demo. Lo siguiente para el diseño es usar adecuadamente la estructura de HTML5, que en el ejemplo sería:

<div id="pagewrap">
  <header></header>
  <content></content>
  <sidebar></sidebar>
  <footer></footer>
</div>

En un principio la altura del header sería de 180 px, la anchura del content de 600 px y la del sidebar de 300.

Y finalmente toca la hora de las media queries para que el diseño se adapte.

Por ejemplo, para una dispositivo con una resolución máxima de 980px pasamos a tamaños relativos:

@media screen and (max-width:980px){
 #pagewrap{
    width:94%;
 }
 content{
    width:65%;
 }
 sidebar{
    width:30%;
 }
}

Para una de menos de 700px modificamos la hoja de estilos para que se posicione la sidebar debajo del contenido:

@media screen and (max-width:700px){
 content{
    width:auto;
    float: none;
 }
 sidebar{
    width:auto;
    float:none;
 }
}

Y para una pantalla de un móvil (máximo de 480 px) reducimos el tamaño de los títulos, dejamos que el ancho de la cabecera (header) se ajuste automáticamente y directamente quitamos la sidebar:

@media screen and (max-width:480px){
 header{
    height:auto;
 }
 h1{
    font-size:24px;
 }
 sidebar{
    display:none;
 }
}

Concluye el artículo remitiendo al de diseño con media queries que yo también traduje en este blog y referencié antes.

Espero que esta pequeña guía tutorial que he traducido, junto a las otras dos traducciones sobre media queries, os hayan servido de ayuda en la edición de vuestros proyectos web. Y si no… jQueryMobile siempre es una ayuda.

Datepicker fácil en tu web

¿Necesitas un “datepicker”? Con esto quiero decir necesitas introducir un calendario en un formulario web, a día de hoy hay muchos sencillos métodos para hacerlo. Pero estas son las dos más fáciles:

  • Campo date en HTML5: Un campo del formulario definido como de tipo date ya te arregla en gran parte el problema. Tiene el handicap de que cada navegador te saca el calendario con el formato que le da la gana
    <input type="date"/>
  • Calendario datepicker con jQueryUI: Esta opción incluye más opciones de personalización. Lo primero es descargar la librería jQuery y lo siguiente bajar los componentes de jQueryUI necesarios, incluyendo sus estilos. Luego para implantarlo debes cargar las dos librerías en la cabecera del documento, usar un campo input normal (en el ejemplo se llamará #calendario) y un script como el siguiente:
    <script>
    	$(function() {
    		$( "#calendario" ).datepicker({
    			changeMonth: true,
    			changeYear: true
    		});
    	});
    	</script>
    
    <div class="ejemplo">
    
    <p>Date: <input type="text" id="calendario"></p>
    
    </div>
    

En fin, para el caso del jQueryUI tienes muchos más ejemplos en la propia página con las distintas opciones.

Diseño responsivo con media queries de CSS3

Siguiendo con los artículos de Web Designer wall, continuamos con el tema de las media queries de CSS3, en este caso con otra traducción/explicación de uno de sus artículos.

En este artículo comienza repitiendo lo que ya hablamos en la otra entrada sobre media queries, que el diseño responsivo a día de hoy cobra mayor imortancia por la variedad de resoluciones que pueden usar los usuarios, y que por tanto el aspecto tiene que adaptarse a la ventana. El ejemplo del resultado que se busca conseguir es este.

El conceto, como diría Manquiña (el conceto es el conceto), es el siguiente: La página tiene un contenedor de tamaño fijo (980px) optimizado par una resolución mayor de 1024 px. La media query se utiliza para saber si el tamaño es menor de 980px, en cuyo caso se pasa a un diseño fluido. Y si el caso es que es menor de 650px entonces, directamente se convierte en un diseño con una sola columna.

El marcado HTML es el siguiente, donde se ha creado un contenedor pagewrapper que envuelve cabecera, cuerpo y pie:

<div id="pagewrap">

	<header id="header">

		<hgroup>
			<h1 id="site-logo">Demo</h1>
			<h2 id="site-description">Site Description</h2>
		</hgroup>

		<nav>
			<ul id="main-nav">
				<li><a href="#">Home</a></li>
			</ul>
		</nav>

		<form id="searchform">
			<input type="search">
		</form>

	</header>
	
	<div id="content">

		<article class="post">
			blog post
		</article>

	</div>
	
	<aside id="sidebar">

		<section class="widget">
			 widget
		</section>
						
	</aside>

	<footer id="footer">
		footer
	</footer>
	
</div>

Como hemos comentado miles de veces, el marcado HTML5 no se lleva bien con las veriones de IE anteriores al 9, pero puedes solucionarlo introduciendo esta línea en la cabecera, que enlazan con una librería de javascript que subsanará el problema:

<!--[if lt IE 9]>
	<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->

Tras esto toca comenzar con el css, y lo primero es resetar todos los elementos de HTML5 a elementos de bloque:

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { 
    display: block;
}

Y tras esto toca la estructura principal del css. El contenedor principal ha sido fijado en 980px, el header tiene una altura fija de 160px, el contente un ancho de 600px flotado a la izquierda y el sidebar, flotado a la derecha, de 280px.:

#pagewrap {
	width: 980px;
	margin: 0 auto;
}

#header {
	height: 160px;
}

#content {
	width: 600px;
	float: left;
}

#sidebar {
	width: 280px;
	float: right;
}

#footer {
	clear: both;
}

Todo esto, así de momento, daría lugar a un diseño estático tal que el de esta demo. Ahora toca la parte divertida: CSS3 Media Queries. Como el HTML5, CSS3 tampoco es que furrule muy bien en IE pre-9, así que de nuevo habrá que tirar de una librería de .js para solventar el problema.

<!--[if lt IE 9]>
	<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->

La idea es hacer un css externo con las media queries, introduciéndolo en el documento tal que así

<link href="media-queries.css" rel="stylesheet" type="text/css">

Luego vendrán las siguientes líneas para cuando la ventana donde visualicemos sea menor de 980px se aplicarán las siguientes reglas:

  • El contenedor principal se resetea al 95%
  • El contenedor de contenido pasa al 60%
  • El contenedor lateral pasa al 30%

El usar el % hace los contenidos fluídos:

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

	#pagewrap {
		width: 95%;
	}

	#content {
		width: 60%;
		padding: 3% 4%;
	}

	#sidebar {
		width: 30%;
	}
	#sidebar .widget {
		padding: 8% 7%;
		margin-bottom: 10px;
	}

}

Luego tocará hacer el media query para tamaños menores de 650px, con una única columna:

  • header = resetear la altura a auto
  • searchform = lo mandamos a una posición absoluta, a 5px del borde superior
  • main-nav = se reseta su posición a estatic
  • site-logo = lo mismo
  • site-description = lo mismo también
  • content = devolvemos el ancho a auto
  • sidebar = ponemos el ancho al 100% y quitamos la propiedad de flotado
@media screen and (max-width: 650px) {

	#header {
		height: auto;
	}

	#searchform {
		position: absolute;
		top: 5px;
		right: 0;
	}

	#main-nav {
		position: static;
	}

	#site-logo {
		margin: 15px 100px 5px 0;
		position: static;
	}

	#site-description {
		margin: 0 0 15px;
		position: static;
	}

	#content {
		width: auto;
		float: none;
		margin: 20px 0;
	}

	#sidebar {
		width: 100%;
		float: none;
		margin: 0;
	}

}

Finalmente tenemos la versión para menos de 480px, pensada para el iPhone. Implica evitar el zoom que automáticamente hace Safari sobre el texto y toquetear el menú de navegación principal:

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

	html {
		-webkit-text-size-adjust: none;
	}

	#main-nav a {
		font-size: 90%;
		padding: 10px 8px;
	}

}

Ahora toca el truquito para imágenes flexibles, con un pequeño hack para que funcione en IE8 (el width: auto\9; de la línea final):

img {
	max-width: 100%;
	height: auto;
	width: auto\9; /* ie8 */
}

Con los vídeos va igual, menos para Safari, dode max-width no va con vídeos (con fotos sí, extraño). Finalmente, y siguiendo con el iPhone de los huevos, toca metar una meta-tag de escala inicial, ya que el iPhone tiende a modificar las páginas para adaptarlas a la pantalla del dispositivo:

<meta name="viewport" content="width=device-width; initial-scale=1.0">

Y con esto está el tutorial terminado, en el artículo citado podrás encontrar además todo el código y las imágenes de la página de ejemplo. Un placer el haberos traducido esto, y todavía me queda al menos una tercera entrada sobre diseño responsivo. Esta semana creo que la cosa va a andar chunga para conectarme mucho rato, así que igual tarda hasta el viernes o sábado. O igual lo puedo hacer mañana, a saber. En todo caso, un saludo.

CSS3 Media Queries

La verdad es que no hace mucho Web designer Wall me ha salvado el culo en el tema del diseño responsivo (hacer que una web se adapte al tamaño de la ventana). Tras mucho tiempo rompiéndome la cabeza, tirando de jQuery y Javascript con pirulas cosa mala para lograr modificar el tamaño del texto, las posiciones de las imágenes… un coñazo y además ineficiente y poco compatible entre navegadores (menos mal que para móviles jQueryMobile me safaba muchas veces), pues tras mucho tiempo, como te iba diciendo, me encuentro este artículo, que ya tiene un par de años y me quedo como “coño, así es más fácil“. La siguiente explicación es una medio traducción/adaptación/explicación del tema, ya que se que en muchos casos lo que buscáis en este blog es una explicación en castellano de algo que ya hay en inglés. Espero que os sirva de ayuda.

Bueno, empezando desde un principio ¿por qué es importante el diseño responsivo? Porque los tiempos en los que el usuario visualizaba webs en su ordenador, con un rango de pantallas que solía oscilar entre las 14 y las 20 pulgadas en el 90% de los casos, ya pasó, es una reliquia de la década pasada, como MySpace, las PDA’s o que en la liga de fútbol española pueda ganar algo un equipo que no sea Madrid o Barcelona. Ahora te puedes encontrar desde el que usa una tele con una definición de 2560px al que lo ve en su teléfono móvil con una de 320px. Los tamaños fijos son un coñazo, y el usar porcentajes para todo… no siempre funciona, porque el tamaño de la fuente o las imágenes no se adaptan, y a veces hay que usar posicionamientos absolutos y te da la risa. CSS2 permitía diferenciar entre una hoja de estilos para la impresión y otra para la presentación en pantalla. CSS3 nos permite ir más allá, nos permite conocer el tamaño de la ventana/pantalla del dispositivo y aplicar un estilo diferente para cada pantalla. Voy a aprovecharme del artículo antes citado y enlazarte aquí con un ejemplo donde verás cómo funciona esto.

Visto esto, aquí tienes la explicación del cómo se hace, sacada del mismo artículo:

Max Width
En este caso el css se aplicará si trabajamos con una resolución de un máximo de 600 pixeles:

@media screen and (max-width: 600px) {
  .class {
    background: #ccc;
  }
}

Si quieres enlazarlo a una archivo CSS distinto, puedes hacerlo poniendo esta línea en la cabecera del documento:

<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" />

Min Width
Al contrario que en el ejemplo de arriba, en este caso se especificará un tamaño mínimo para utilizar este estilo (en este caso, se aplicará a toda las resoluciones mayores de 900px).

@media screen and (min-width: 900px) {
  .class {
    background: #666;
  }
}

Media Queries múltiples
Tienes también la opción de utilizar dos valores a la vez, máximo y mínimo, para que el estilo se aplique a los comprendidos entre esos valores. En este caso, entre 600 y 900 px.

@media screen and (min-width: 600px) and (max-width: 900px) {
  .class {
    background: #333;
  }
}

Max device
Finalmente está la opción de adaptarlo a la máxima resolución del dispositivo. Los ejemplos anteriores hacen referencia al tamaño de la ventana/area de visualización, mientras que este se referiría a la resolución máxima que pueda mostrar el teléfono/ordenador/tableta en cuestión.

@media screen and (max-device-width: 480px) {
  .class {
    background: #000;
  }
}

En el artículo original arriba referenciado podéis encontrar también código para adaptarlo específicamente para iPad y iPhone4. No tiene mucha ciencia, podréis ver los ejemplos de código pinchando allí, además hay páginas de ejemplo al final.

Lo interesante está en uno de los puntos finales, donde comentan que, como siempre, va a haber problemas con Explorer. Bueno, no hay que ser 100% injusto con Microsoft, en principio Explorer 9 va bien, pero en las versiones anteriores la cosa ya no va por ningún lado. Dan varias soluciones, pero yo recomiendo la del plugin de jQuery para hacer furrular las media queries, que está en este ejemplo. Hay varios artículos más sobre diseño responsivo en esta página, así que intentaré próximamente meter un par de estas medio traducciones.