CSS – Mis Media Queries

Publicado por Iván Gajate el 15 de enero de 2014 en css, Desarrollo Web

Estas son MIS media queries para hacer un site responsive y distinguir entre la versión por defecto de escritorio, la versión de tablet y la versión de móvil.

Ver ejemplo (redimensionar la ventana y probarlo en diferentes dispositivos)

<style>
 
	/* Desktop */
	/*---------------------------------------------------------------------------*/
	body:after {
		content: 'Desktop';
		font-size: 28px;
	}
 
 
 
	/* Tablet */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 1023px),
	only screen and (max-device-width : 1100px) {
 
		body:after {
			content: 'Tablet';
		}
 
	}
 
 
 
	/* Tablet Landscape */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 1023px),
	only screen and (max-device-width : 1100px) and (orientation: landscape) {
 
		body:after {
			content: 'Tablet Landscape';
		}
 
	}
 
	/* Tablet Portrait */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 800px) and (orientation: portrait) {
 
		body:after {
			content: 'Tablet Portrait';
		}
 
	}
 
 
 
 
 
	/* Mobile */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 600px) {
 
		body:after {
			content: 'Mobile';
		}
 
	}
 
	/* Mobile Landscape */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 600px),
	only screen and (max-device-width : 600px) and (orientation: landscape) {
 
		body:after {
			content: 'Mobile Landscape';
		}
 
	}
 
 
	/* Mobile Portrait */
	/*---------------------------------------------------------------------------*/
	@media
	only screen and (max-width : 400px),
	only screen and (max-device-width : 400px) and (orientation: portrait) {
 
		body:after {
			content: 'Mobile Portrait';
		}
 
	}
 
 
</style>
En el ejemplo voy cambiando el contenido de la etiqueta after para que vaya indicando en qué dispositivo se encuentra pero solo es con fines didácticos.
  • Desktop: La idea es que todo lo que esté por encima de los media queries sea la versión de escritorio.
  • Tablet: por debajo de 1024 muestra la versión de tablet en un ordenador de sobremesa. Así mismo, si es una tablet también entraría en esta query.
    max-device-width en iPad es 768 siempre, independientemente de si está en vertical u horizontal, sin embargo Android si que diferencia la anchura si está en horizontal o vertical. Un Nexus 7 por ejemplo da unas medidas de 966×603. Para unificar estos comportamientos, compruebo también la orientación. Y le doy un poco de margen para tabletas algo mas grandes, hasta 1100px.
    La versión vertical la he puesto a 800px, un poco mas delos 768px del iPad.
  • Móvil: Tomo como medida máxima en horizontal 600px y en vertical 400px.

He querido distinguir entre tablet y tablet horizontal y vertical porque la mayoría de las veces no necesitaremos especificar tanto, pero por si acaso necesitamos concretar mas pues ahí las tenemos.

A veces utilizo max-width en lugar de max-device-with porque este último no se comprueba si la ventana del navegador se redimensiona así como al girar el dispositivo, y en determinadas ocasiones no informa bien del cambio de orientación.

No se debe maquetar para dispositivos concretos, sino para que se adapte a diferentes resoluciones. A veces maquetamos o programamos especificamente para iPad o iPhone. ¿y si mañana aparece un dispositivo nuevo con unas dimensiones ligeramente diferentes?
Estas medidas que he puesto son para tener una referencia de cuando pasamos de un tamaño a otro, pero dentro de estas referencias los diseños deberían fluir.

 

Los comentarios están cerrados.