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.