Skip to main content

Media Queries para todo dispositivo

A continuación les dejo un listado de las @media queries más comunes de CSS3 para hacer responsive web desing: adaptar sus páginas web a los diferentes dispositivos móviles (Smartphones, iPads, iPhones) en sus diferentes posiciones portrait (vertical) and landscape (horizontal):

Lo que buscamos generalmente es como agregar una mediaquery para controlar PC o Mobile, en ese caso les dejo 2 media querys con lo que pueden trabajar perfectamente sin necesidad de entrar en mayor detalle:

/* Cuando la pantalla es mayor a 900px */
@media only screen and (min-width : 901px) {
//tu CSS
}

/* Cuando la pantalla es menor a 900px  (tablets y teléfonos inteligentes)*/
@media only screen and (max-width : 900px) {
//tu CSS
}

Ahora si quieres más información e ir un poco más en detalle, puedes probar estos códigos:

/* Smartphones (portrait & landscape) 
#Dispositivo = Mayoría de teléfonos móviles (vertical y horizontal) 
#Resolución = B/w 320px to 479px */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
  //CSS
}

/* #Dispositivo = Tablets de baja resolución y teléfonos Móviles (horizontal) 
#Resolución = B/w 481px to 767px */
@media (min-width: 481px) and (max-width: 767px) {
  //CSS
}
  
/* Smartphones (landscape) */
@media only screen and (min-width : 321px) {
//CSS
}

/* Smartphones (portrait) */
@media only screen and (max-width : 320px) {
//CSS 
}
 
/* iPads (portrait & landscape) */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) {
  //CSS
}
 
/* iPads (landscape) 
#Dispositivo = Tablets, Ipads (horizontal) 
#Resolución = B/w 768px to 1024px */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
and (orientation : landscape) {
 //CSS 
}
 
/* iPads (portrait) 
#Dispositivo = Tablets, Ipads (vertical) 
#Resolucion = B/w 768px to 1024px */
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) 
and (orientation : portrait) {
 //CSS 
}
 
/* Ordenadores de sobremesa y portátiles */
@media only screen and (min-width : 1224px) {
 //CSS 
}
 
/* Pantallas grandes */
@media only screen and (min-width : 1824px) {
 //CSS 
}
 
/* iPhone 4 */
@media only screen and (-webkit-min-device-pixel-ratio : 1.5), 
only screen and (min-device-pixel-ratio : 1.5) {
 //CSS 
}

Importante: Si te da error al escribir el código te aconsejo que las media queries las escribas en una sola línea contínua, sin saltos de carro o sin presionar la tecla enter . El CSS que va dentro lo puedes ordenar como gustes.

Te invito a seguir a Risi.cl
en Facebook y/o Instagram

DEJA UN COMENTARIO