¿Cuál es el método correcto para usar consultas de medios CSS para crear un sitio receptivo con Bootstrap?

@media screen y (max-width: $ screen-lg-max) {
altura: 300 px;
}

  • Si está utilizando puntos de interrupción personalizados, agregue un comentario sobre la consulta de medios que explique por qué lo está utilizando.
  • Bootstrap 4 también tiene un sistema de cuadrícula basado en flexbox. Use esto si el número de columnas es dinámico y propenso a cambiar.

No utilizas consultas de medios en absoluto. Bien hecho, Bootstrap se encargará del 98% de la capacidad de respuesta. Deberá agregar un código personalizado pero intente mantenerlo al mínimo. Concéntrese en comprender cómo funcionan las cuadrículas y los componentes de Bootstrap y construya utilizando esos como sus bloques de construcción.

Usualmente los copio de la clase oculta xs sm md lg.

@media (ancho mínimo: 1200px) {
/ * lg * /
}
@media (ancho máximo: 1199px) y (ancho mínimo: 992px) {
/ * md * /
}
@media (ancho máximo: 991 px) y (ancho mínimo: 768 px) {
/ * sm * /
}
@media (ancho máximo: 767 px) {
/ * xs * /
}