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.
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.