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):

 

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

Si te fue de ayuda agradécenos dando like en Facebook y/o Instagram

DEJA UN COMENTARIO