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.







