Twitter Bootstrap 3: ¿cómo utilizar las consultas de medios?
Estoy usando Bootstrap 3 para crear un diseño responsivo en el que quiero ajustar algunos tamaños de fuente según el tamaño de la pantalla. ¿Cómo puedo utilizar consultas de medios para crear este tipo de lógica?
Arranque 3
Estos son los selectores utilizados en BS3, si desea mantener la coherencia:
@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Nota: Para su información, esto puede resultar útil para depurar:
<span class="visible-xs">SIZE XS</span>
<span class="visible-sm">SIZE SM</span>
<span class="visible-md">SIZE MD</span>
<span class="visible-lg">SIZE LG</span>
Arranque 4
Aquí están los selectores utilizados en BS4. No existe una configuración "más baja" en BS4 porque "extra pequeña" es la predeterminada. Es decir, primero codificaría el tamaño XS y luego anularía estos medios.
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
Arranque 5
@media(min-width:576px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}
@media(min-width:1400px){}
Actualización 2021-05-20: La información sigue siendo precisa a partir de las versiones 3.4.1, 4.6.0, 5.3.0.
Basándome en la respuesta de bisio y el código Bootstrap 3, pude encontrar una respuesta más precisa para cualquiera que simplemente quiera copiar y pegar la consulta de medios completa configurada en su hoja de estilo:
/* Large desktops and laptops */
@media (min-width: 1200px) {
}
/* Landscape tablets and medium desktops */
@media (min-width: 992px) and (max-width: 1199px) {
}
/* Portrait tablets and small desktops */
@media (min-width: 768px) and (max-width: 991px) {
}
/* Landscape phones and portrait tablets */
@media (max-width: 767px) {
}
/* Portrait phones and smaller */
@media (max-width: 480px) {
}
Si estás usando LESS o SCSS/SASS y estás usando una versión LESS/SCSS de Bootstrap, también puedes usar variables , siempre que tengas acceso a ellas. Una traducción MENOS de la respuesta de @full-decent sería la siguiente:
@media(max-width: @screen-xs-max){}
@media(min-width: @screen-sm-min){} /* deprecated: @screen-tablet, or @screen-sm */
@media(min-width: @screen-md-min){} /* deprecated: @screen-desktop, or @screen-md */
@media(min-width: @screen-lg-min){} /* deprecated: @screen-lg-desktop, or @screen-lg */
También hay variables para @screen-sm-maxy @screen-md-max, que son 1 píxel menos que @screen-md-miny @screen-lg-min, respectivamente, que normalmente se usan con @media(max-width).
EDITAR: Si está usando SCSS/SASS, las variables comienzan con a $en lugar de a @, por lo que sería $screen-xs-maxetc.
Estos son los valores de Bootstrap3:
/* Extra Small */
@media(max-width:767px){}
/* Small */
@media(min-width:768px) and (max-width:991px){}
/* Medium */
@media(min-width:992px) and (max-width:1199px){}
/* Large */
@media(min-width:1200px){}
