cómo crear: puntos de quiebre de dispositivos típicos

Aprende a usar consultas de medios para puntos de quiebre de dispositivos comunes.

puntos de quiebre de dispositivos típicos

Existen una gran cantidad de pantallas y dispositivos con diferentes alturas y anchos, por lo que es difícil crear puntos de quiebre precisos para cada dispositivo.

Para simplificar las operaciones, puede identificar cinco grupos comunes:

ejemplo

/* dispositivos muy pequeños (teléfonos móviles, 600px y menos) */
@media only screen and (max-width: 600px) {...}
/* dispositivos pequeños (tabletas en vertical y grandes teléfonos móviles, 600px y más) */
@media only screen and (min-width: 600px) {...}
/* dispositivos medianos (tabletas apaisadas, 768px y más) */
@media only screen and (min-width: 768px) {...}
/* dispositivos grandes (portátiles y computadoras de escritorio, 992px y más) */
@media only screen and (min-width: 992px) {...}
/* dispositivos de gran tamaño (portátiles de gran pantalla y computadoras de escritorio, 1200px y más) */
@media only screen and (min-width: 1200px) {...}

prueba por tu cuenta

páginas relacionadas

tutoriales:Consulta de medios de CSS

tutoriales:ejemplo de consulta de medios CSS

manual de referencia:Regla @media de CSS

tutoriales:diseño web responsivo mediante consultas de medios

manual de referencia:método JavaScript window.matchMedia()