Los marcos frontend como bootstrap han invertido mucho tiempo en descubrir qué puntos de interrupción funcionan mejor en dispositivos modernos. Así que sugiero seguir su ejemplo. A continuación se encuentran las consultas de medios utilizadas por los principales marcos frontend.
Bootstrap 4
/ *
Dispositivos extra pequeños (teléfonos verticales, menos de 544 px)
No hay consulta de medios ya que este es el valor predeterminado en Bootstrap porque es
“móvil primero”
* /
/ * Dispositivos pequeños (teléfonos horizontales, 544 px y más) * /
@media (ancho mínimo: 544 px) {
}
- Cómo hacer un diseño de moda en casa
- ¿Cuáles son las mejores formas de diseñar un sombrero de colono?
- ¿Cuándo es un buen diseño, lo suficientemente bueno?
- ¿Cómo detectar el ingenio de un diseño tradicional? ¿Hay parámetros objetivos para calificar el ingenio en un diseño?
- ¿Qué es el diseño web?
/ * Dispositivos medianos (tabletas, 768 px y superiores) La barra de navegación aparece en este punto de interrupción * /
@media (ancho mínimo: 768px) {
}
/ * Dispositivos grandes (computadoras de escritorio, 992 px y más) * /
@media (ancho mínimo: 992px) {
}
/ * Dispositivos extra grandes (escritorios grandes, 1200 px y más) * /
@media (ancho mínimo: 1200px) {
}
Fundación
// pantallas pequeñas
@media only screen {} / * Definir estilos móviles * /
@media solo pantalla y (max-width: 40em) {} / * max-width 640px, estilos solo para dispositivos móviles, utilícelo cuando tenga problemas móviles con QAing * /
// Pantallas medianas
@media solo pantalla y (min-width: 40.063em) {} / * min-width 641px, pantallas medianas * /
@media solo pantalla y (min-width: 40.063em) y (max-width: 64em) {} / * min-width 641px y max-width 1024px, utilícelo cuando se trate de QAing solo para tabletas * /
// pantallas grandes
@media solo pantalla y (min-width: 64.063em) {} / * min-width 1025px, pantallas grandes * /
@media solo pantalla y (min-width: 64.063em) y (max-width: 90em) {} / * min-width 1025px y max-width 1440px, utilícelo cuando QAing emita problemas de pantalla grande * /
// pantallas XLarge
@media solo pantalla y (min-width: 90.063em) {} / * min-width 1441px, pantallas xlarge * /
@media solo pantalla y (min-width: 90.063em) y (max-width: 120em) {} / * min-width 1441px y max-width 1920px, utilícelo cuando QAing xlarge solo muestre problemas * /
// pantallas XXLarge
@media solo pantalla y (ancho mínimo: 120.063em) {} / * ancho mínimo 1921px, pantallas xxlarge * /
