Cómo hacerlo: puntos de interrupción típicos del dispositivo
Aprenda a usar consultas de medios para puntos de interrupción de dispositivos comunes.
Puntos de interrupción típicos del dispositivo
Hay toneladas de pantallas y dispositivos con diferentes alturas y anchos, por lo que es difícil crear un punto de interrupción exacto para cada dispositivo. Para simplificar las cosas, podría dirigirse a cinco grupos comunes:
Ejemplo
/*
Extra small devices (phones, 600px and down) */
@media only screen and (max-width: 600px)
{...}
/* Small devices (portrait tablets and large phones, 600px and up)
*/
@media only screen and (min-width: 600px) {...}
/* Medium devices (landscape tablets, 768px and up) */
@media only screen and (min-width: 768px) {...}
/* Large devices (laptops/desktops, 992px and up)
*/
@media only screen and (min-width: 992px) {...}
/* Extra large devices (large
laptops and desktops,
1200px and up) */
@media only screen and (min-width: 1200px) {...}
páginas relacionadas
Tutorial de CSS: Consultas de medios CSS
Tutorial de CSS: Ejemplos de consultas de medios CSS
Referencia CSS: la regla @media
Tutorial de RWD: diseño web receptivo con consultas de medios
Tutorial de JavaScript: El método window.matchMedia()