Estoy usando Bootstrap 3 para construir un diseño receptivo donde quiero ajustar algunos tamaños de fuente de acuerdo con el tamaño de la pantalla. ¿Cómo puedo usar consultas de medios para hacer este tipo de lógica?

Bootstrap 3

Estos son los selectores utilizados en BS3, si desea mantenerse consistente:

@media(max-width:767px){}
@media(min-width:768px){}
@media(min-width:992px){}
@media(min-width:1200px){}

Nota: para su información, esto puede ser útil para la depuración:

<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>

Bootstrap 4

Aquí están los selectores utilizados en BS4. No hay configuración "más baja" en BS4 porque "extra pequeño" es el valor predeterminado. 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){}

Actualización 2019-02-11: la información de BS3 sigue siendo precisa a partir de la versión 3.4.0, BS4 actualizada para la nueva cuadrícula, precisa a partir de 4.3.0.

Basado en la respuesta de bisio y el código Bootstrap 3, pude encontrar una respuesta más precisa para cualquiera que solo buscara copiar y pegar el conjunto completo de consultas de medios 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á usando MENOS o SCSS / SASS y está usando una versión MENOS / SCSS de Bootstrap, también puede usar variables , siempre que tenga acceso a ellas. Una MENOR traducción de la respuesta de @ full -cente 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, típicamente para usar con@media(max-width) .

EDITAR: si está utilizando SCSS / SASS, las variables comienzan con un en $lugar de un @, 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){}

Aquí hay dos ejemplos.

Una vez que la ventana gráfica tenga 700px de ancho o menos, haga que todas las etiquetas h1 tengan 20px.

@media screen and ( max-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Haga que todos los h1 sean 20px hasta que la ventana gráfica alcance 700px o más.

@media screen and ( min-width: 700px ) {
  h1 {
     font-size: 20px;
  }
}

Espero que esto ayude: 0)

Aquí hay un ejemplo más modular que usa MENOS para imitar Bootstrap sin importar menos archivos.

@screen-xs-max: 767px;
@screen-sm-min: 768px;
@screen-sm-max: 991px;
@screen-md-min: 992px;
@screen-md-max: 1199px;
@screen-lg-min: 1200px;

//xs only
@media(max-width: @screen-xs-max) {

}
//small and up
@media(min-width: @screen-sm-min) {

}
//sm only
@media(min-width: @screen-sm-min) and (max-width: @screen-sm-max) {

}
//md and up
@media(min-width: @screen-md-min) {

}
//md only
@media(min-width: @screen-md-min) and (max-width: @screen-md-max) {

}
//lg and up
@media(min-width: @screen-lg-min) {

}

Basado en las respuestas de otros usuarios, escribí estos mixins personalizados para un uso más fácil:

Menos entrada

.when-xs(@rules) { @media (max-width: @screen-xs-max) { @rules(); } }
.when-sm(@rules) { @media (min-width: @screen-sm-min) { @rules(); } }
.when-md(@rules) { @media (min-width: @screen-md-min) { @rules(); } }
.when-lg(@rules) { @media (min-width: @screen-lg-min) { @rules(); } }

Ejemplo de uso

body {
  .when-lg({
    background-color: red;
  });
}

Entrada SCSS

@mixin when-xs() { @media (max-width: $screen-xs-max) { @content; } }
@mixin when-sm() { @media (min-width: $screen-sm-min) { @content; } }
@mixin when-md() { @media (min-width: $screen-md-min) { @content; } }
@mixin when-lg() { @media (min-width: $screen-lg-min) { @content; } }

Ejemplo de uso:

body {
  @include when-md {
    background-color: red;
  }
}

Salida

@media (min-width:1200px) {
  body {
    background-color: red;
  }
}

A partir de Bootstrap v3.3.6, se utilizan las siguientes consultas de medios que corresponden con la documentación que describe las clases receptivas que están disponibles ( http://getbootstrap.com/css/#responsive-utilities ).

/* Extra Small Devices, .visible-xs-* */
@media (max-width: 767px) {}

/* Small Devices, .visible-sm-* */
@media (min-width: 768px) and (max-width: 991px) {}

/* Medium Devices, .visible-md-* */
@media (min-width: 992px) and (max-width: 1199px) {}

/* Large Devices, .visible-lg-* */
@media (min-width: 1200px) {}

Consultas multimedia extraídas del repositorio Bootstrap GitHub de los siguientes archivos menos: -

https://github.com/twbs/bootstrap/blob/v3.3.6/less/responsive-utilities.less https://github.com/twbs/bootstrap/blob/v3.3.6/less/variables.less

O simple Sass-Compass:

@mixin col-xs() {
    @media (max-width: 767px) {
        @content;
    }
}
@mixin col-sm() {
    @media (min-width: 768px) and (max-width: 991px) {
        @content;
    }
}
@mixin col-md() {
    @media (min-width: 992px) and (max-width: 1199px) {
        @content;
    }
}
@mixin col-lg() {
    @media (min-width: 1200px) {
        @content;
    }
}

Ejemplo:

#content-box {
    @include border-radius(18px);
    @include adjust-font-size-to(18pt);
    padding:20px;
    border:1px solid red;
    @include col-xs() {
        width: 200px;
        float: none;
    }
}

tenga en cuenta que evitar la escala de texto es la razón principal por la que existen diseños receptivos. Toda la lógica detrás de los sitios receptivos es crear diseños funcionales que muestren efectivamente su contenido para que sea fácilmente legible y utilizable en múltiples tamaños de pantalla.

Aunque es necesario escalar el texto en algunos casos, tenga cuidado de no miniaturizar su sitio y perder el punto.

Heres un ejemplo de todos modos.

@media(min-width:1200px){

    h1 {font-size:34px}

}
@media(min-width:992px){

    h1 {font-size:32px}

}
@media(min-width:768px){

    h1 {font-size:28px}

}
@media(max-width:767px){

    h1 {font-size:26px}

}

También tenga en cuenta que la vista de 480 se ha eliminado en bootstrap 3.

Utilizamos las siguientes consultas de medios en nuestros archivos Less para crear los puntos de interrupción clave en nuestro sistema de cuadrícula.

/* Small devices (tablets, 768px and up) */
@media (min-width: @screen-sm-min) { ... }

/* Medium devices (desktops, 992px and up) */
@media (min-width: @screen-md-min) { ... }

/* Large devices (large desktops, 1200px and up) */
@media (min-width: @screen-lg-min) { ... }

ver también en Bootstrap

puedes ver en mi ejemplo los tamaños de fuente y los colores de fondo están cambiando de acuerdo con el tamaño de la pantalla

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
    background-color: lightgreen;
}
/* Custom, iPhone Retina */ 
@media(max-width:320px){
    body {
        background-color: lime;
        font-size:14px;
     }
}
@media only screen and (min-width : 320px) {
     body {
        background-color: red;
        font-size:18px;
    }
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
     body {
        background-color: aqua;
        font-size:24px;
    }
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
     body {
        background-color: green;
        font-size:30px;
    }
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
     body {
        background-color: grey;
        font-size:34px;
    }
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
     body {
        background-color: black;
        font-size:42px;
    }
}
</style>
</head>
<body>
<p>Resize the browser window. When the width of this document is larger than the height, the background-color is "lightblue", otherwise it is "lightgreen".</p>
</body>
</html>

Aquí hay una solución única aún más fácil, que incluye archivos receptivos separados basados ​​en consultas de medios.

Esto permite que toda la lógica de consulta de medios e incluya lógica solo tenga que existir en una página, el cargador. También permite que las consultas de los medios no llenen las propias hojas de estilo receptivas.

//loader.less

// this twbs include adds all bs functionality, including added libraries such as elements.less, and our custom variables
@import '/app/Resources/less/bootstrap.less';

/*
* Our base custom twbs overrides
* (phones, xs, i.e. less than 768px, and up)
* no media query needed for this one since this is the default in Bootstrap
* All styles initially go here.  When you need a larger screen override, move those     
* overrides to one of the responsive files below
*/
@import 'base.less';

/*
* Our responsive overrides based on our breakpoint vars
*/
@import url("sm-min.less") (min-width: @screen-sm-min); //(tablets, 768px and up)
@import url("md-min.less") (min-width: @screen-md-min); //(desktops, 992px and up)
@import url("large-min.less") (min-width: @screen-lg-min); //(large desktops, 1200px and up)

base.less se vería así

/**
* base.less
* bootstrap overrides
* Extra small devices, phones, less than 768px, and up
* No media query since this is the default in Bootstrap
* all master site styles go here
* place any responsive overrides in the perspective responsive sheets themselves
*/
body{
  background-color: @fadedblue;
}

sm-min.less se vería así

/**
* sm-min.less
* min-width: @screen-sm-min
* Small devices (tablets, 768px and up)
*/
body{
  background-color: @fadedgreen;
}

su índice solo tendría que cargar el cargador.

<link rel="stylesheet/less" type="text/css" href="loader.less" />

pan comido..

Bootstrap utiliza principalmente los siguientes rangos de consulta de medios (o puntos de interrupción) en nuestros archivos Sass de origen para nuestro diseño, sistema de cuadrícula y componentes.

Dispositivos extra pequeños (teléfonos verticales, menos de 576 px) Sin consulta de medios xsya que este es el valor predeterminado en Bootstrap

Pequeños dispositivos (teléfonos apaisados, 576 px y más)

@media (min-width: 576px) { ... }

Dispositivos medianos (tabletas, 768 px y más)

@media (min-width: 768px) { ... }

Dispositivos grandes (computadoras de escritorio, 992 px y más)

@media (min-width: 992px) { ... }

Dispositivos extra grandes (escritorios grandes, 1200 px y más)

@media (min-width: 1200px) { ... }

Como escribimos nuestro CSS de origen en Sass, todas nuestras consultas de medios están disponibles a través de los mixins de Sass:

No es necesaria una consulta de medios para el punto de interrupción xs, ya que es eficaz @media (min-width: 0) { ... }

@include media-breakpoint-up(sm) { ... }
@include media-breakpoint-up(md) { ... }
@include media-breakpoint-up(lg) { ... }
@include media-breakpoint-up(xl) { ... }

Para entenderlo profundamente, vaya al siguiente enlace

https://getbootstrap.com/docs/4.3/layout/overview/

@media solo pantalla y (ancho máximo: 1200px) {}

@media solo pantalla y (ancho máximo: 979px) {}

@media solo pantalla y (ancho máximo: 767px) {}

@media solo pantalla y (ancho máximo: 480px) {}

@media solo pantalla y (ancho máximo: 320px) {}

@media (ancho mínimo: 768 px) y (ancho máximo: 991 px) {}

@media (ancho mínimo: 992 px) y (ancho máximo: 1024 px) {}

Use consultas de medios para IE;

@media only screen 
and (min-device-width : 320px) 
and (max-device-width : 480px) 
and (orientation : landscape) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}
@media only screen 
and (min-device-width : 360px) 
and (max-device-width : 640px) 
and (orientation : portrait) and (-ms-high-contrast: none), (-ms-high-contrast: active) {
}

:)

En el último bootstrap (4.3.1), usando SCSS (SASS) puede usar uno de @mixin de /bootstrap/scss/mixins/_breakpoints.scss

Medios de al menos el ancho mínimo del punto de ruptura. Ninguna consulta para el punto de interrupción más pequeño. Hace que el @content se aplique al punto de interrupción dado y sea más amplio.

@mixin media-breakpoint-up($name, $breakpoints: $grid-breakpoints)

Medios de como máximo el ancho máximo del punto de ruptura. Ninguna consulta para el punto de interrupción más grande. Hace que el contenido @ se aplique al punto de interrupción dado y sea más estrecho.

@mixin media-breakpoint-down($name, $breakpoints: $grid-breakpoints)

Medios que abarcan múltiples anchos de punto de interrupción. Hace que el @content se aplique entre los puntos de interrupción mínimo y máximo

@mixin media-breakpoint-between($lower, $upper, $breakpoints: $grid-breakpoints)

Medios entre los anchos mínimo y máximo del punto de interrupción. No hay mínimo para el punto de ruptura más pequeño, ni máximo para el más grande. Hace que el contenido @ se aplique solo al punto de interrupción dado, no a las ventanas gráficas más anchas o más estrechas.

@mixin media-breakpoint-only($name, $breakpoints: $grid-breakpoints)

Por ejemplo:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

  @include media-breakpoint-down(xs) {
    margin-bottom: 1rem;
  }
}

Documentación:

• Introducción https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• migración https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• variables https://getbootstrap.com/docs/4.3/layout/grid/#variables

Codificación feliz;)

Para mejorar la respuesta principal:

Puede usar el atributo de medios de la <link>etiqueta (admite consultas de medios) para descargar solo el código que el usuario necesita.

<link href="style.css" rel="stylesheet">
<link href="deviceSizeDepending.css" rel="stylesheet" media="(min-width: 40em)">

Con esto, el navegador descargará todos los recursos CSS, independientemente del atributo multimedia . La diferencia es que si la consulta de medios del atributo de medios se evalúa como falsa , ese archivo .css y su contenido no se bloquearán.

Por lo tanto, se recomienda utilizar el atributo de medios en<link> etiqueta, ya que garantiza una mejor experiencia de usuario.

Aquí puede leer un artículo de Google sobre este problema. https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Algunas herramientas que lo ayudarán a automatizar la separación de su código CSS en diferentes archivos de acuerdo con sus consultas de medios

Webpack https://www.npmjs.com/package/media-query-plugin https://www.npmjs.com/package/media-query-splitting-plugin

PostCSS https://www.npmjs.com/package/postcss-extract-media-query