Las Media Queries son realmente últiles para personalizar nuestros estilos para los distintos dispositivos que acceden a nuestra web y visualizan nuestro sitio con distintas resoluciones, a esto hoy en día se le conoce como diseño responsive.

Para resolver este problema, os vamos a dejar una lista con las Media Queries más comunes y utilizadas en CSS.

Primero vamos con unas Media Queries básicas:

/* Escritorio grande */
@media (min-width: 1200px) { }

/* Tablets grandes */
@media (min-width: 768px) and (max-width: 979px) { }

/* Tablets medianas */
@media (max-width: 767px) { }

/* Smartphones */
@media (max-width: 480px) { }

Y por último, tenemos las siguientes Media Queries más específicas:

/* Smartphones (pantalla vertical y horizontal) */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) { }

/* Smartphones (pantalla horizontal) */
@media only screen and (min-width : 321px) { }

/* Smartphones (pantalla vertical) */
@media only screen and (max-width : 320px) { }

/* iPads (pantalla vertical y horizontal) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) { }

/* iPads (pantalla horizontal) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape) { }

/* iPads (pantalla vertical) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait) { }

/* Escritorios y portátiles estándar */
@media only screen and (min-width : 1224px) { }

/* Pantallas grandes */
@media only screen and (min-width : 1824px) { }

/* iPhone 4 y dispositivos con gran ratio de pixeles */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) { }

Eso es todo amigos, con estas Media Queries de CSS3 dispondremos de un sitio web responsive totalmente adaptable a cualquier dispositivo.
 

Sobre Reacción Estudio

Somos un estudio informático formado por jóvenes centrados en el desarrollo web, el diseño gráfico y la fotografía. Puedes solicitar presupuesto para tu proyecto a través de nuestra página web o por teléfono, pero en este blog hablaremos de todo lo que engloba el desarrollo web a día de hoy.


Este sitio web utiliza cookies para que usted tenga la mejor experiencia de usuario. Si continúa navegando está dando su consentimiento para la aceptación de las mencionadas cookies y la aceptación de nuestra política de cookies.     ACEPTAR