Os dejo un listado de los comúnmente llamados breakpoints en media queries para darle distintas propiedades al CSS según la resolución de pantalla. No son otra cosa que reglas que afectan a la visualización de la página según la resolución y se pueden combinar como queramos, siempre teniendo en cuenta que al ser en cascada los de abajo sustituirán los estilos de arriba.
Los ejemplos siguientes hacen referencia al ancho del navegador pero también se puede utilizar la propiedad min-device-height o max-device-height. Las medidas en píxeles se corresponden con las más utilizadas pero pueden modificarse según nos interese e incluso usar porcentajes o em. Haced más pequeña la ventana de vuestro navegador mientras consultáis esta web para comprobar el efecto.
/* Smartphones (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
}
/* Smartphones (horizontal) ----------- */
@media only screen
and (min-width : 321px) {
}
/* Smartphones (vertical) ----------- */
@media only screen
and (max-width : 320px) {
}
/* iPad2 (vertical y horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px) {
}
/* iPad2 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape) {
}
/* iPad2 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait) {
}
/* Ipad3 (horizontal) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}
/* Ipad3 (vertical) ----------- */
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2) {
}
/* Grandes resoluciones ----------- */
@media only screen
and (min-width : 1824px) {
}
/* iPhone 4 ----------- */
@media
only screen and (-webkit-min-device-pixel-ratio : 1.5),
only screen and (min-device-pixel-ratio : 1.5) {
}
/* iPhone 5 ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px)
and (orientation : landscape)
and (-webkit-min-device-pixel-ratio : 2) {
}
La información está extraída de:
ResponsiveDesign.is CSS Tricks
Podéis encontrar más información sobre media queries en: