Bootstrap Media Queries

1 marzo, 2018

En la mayoría de los casos gracias a todas las clases que provee Bootstrap nos será suficiente para componer nuestra web. Sin embargo, en algunas situaciones es posible que queramos modificar dicho comportamiento, por ejemplo para aplicar determinados estilos CSS (como colores, alineaciones, etc.) que cambien según el tamaño de pantalla. En estos casos será necesario que creemos nuestra propia media query para aplicar los estilos deseados.

Recordar que los rangos que define Bootstrap son:

  • Pantallas extra pequeñas (móviles) < 768px
  • Pantallas pequeñas (tablets) ≥ 768px
  • Pantallas medianas (escritorio) ≥ 992px
  • Pantallas grandes (escritorio) ≥ 1200px
/*=====================================================
= Bootstrap 2.3.2 Media Queries =
=====================================================*/
@media only screen and (max-width : 1200px) {
}
@media only screen and (max-width : 979px) {
}
@media only screen and (max-width : 767px) {
}
@media only screen and (max-width : 480px) {
}
@media only screen and (max-width : 320px) {
}

/*==================================================
= Bootstrap 3 Media Queries =
==================================================*/
/*========== Mobile First Method ==========*/
/* Custom, iPhone Retina */
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}
/*========== Non-Mobile First Method ==========*/
/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {
}
/*=====================================================
= Bootstrap 4 Media Queries =
=====================================================*/
@media (min-width: 544px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 1200px) {
}
@media (max-width: 950px) {
}

Categorías

Tactic Sport: Innovación y Pasión por el Ciclismo

Tactic Sport: Innovación y Pasión por el Ciclismo

Historia y Procedencia Tactic Sport, fundada en 1988, es una empresa española con sede en Bescanó, Girona. Su compromiso con la calidad y la innovación la ha convertido en un referente en el mundo del ciclismo. Desde sus inicios, Tactic Sport se ha centrado en diseñar...

Descubriendo los Kits de Guitarras Harley Benton

Descubriendo los Kits de Guitarras Harley Benton

Historia de los kits de guitarras Harley Benton Harley Benton es la marca de instrumentos de cuerda, amplificadores y armónicas de Musikhaus Thomann, un gran comerciante de instrumentos y equipos de audio de Baviera, Alemania. La marca se enfoca principalmente en el...