Estou usando o Bootstrap 3 para criar um layout responsivo onde desejo ajustar alguns tamanhos de fonte de acordo com o tamanho da tela. Como posso usar consultas de mídia para criar esse tipo de lógica?

Bootstrap 3

Aqui estão os seletores usados ​​no BS3, se você quiser permanecer consistente:

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

Nota: Para sua informação, isso pode ser útil para depuração:

<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

Aqui estão os seletores usados ​​no BS4. Não há configuração "mais baixa" no BS4 porque "pequeno demais" é o padrão. Ou seja, você primeiro codifica o tamanho do XS e depois substitui essas mídias.

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

Atualização 2019-02-11: As informações do BS3 ainda são precisas a partir da versão 3.4.0, BS4 atualizado para nova grade, precisas a partir do 4.3.0.

Com base na resposta do bisio e no código do Bootstrap 3, consegui encontrar uma resposta mais precisa para quem apenas deseja copiar e colar o conjunto completo de consultas de mídia em sua folha 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) {

}

Se você estiver usando LESS ou SCSS / SASS e uma versão LESS / SCSS do Bootstrap, poderá usar variáveis também, desde que tenha acesso a elas. Uma tradução MENOS da resposta de @ full-decent seria a seguinte:

@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 */

Também existem variáveis ​​para @screen-sm-maxe @screen-md-max, que são 1 pixel a menos que @screen-md-mine @screen-lg-min, respectivamente, geralmente para uso com@media(max-width) .

EDIT: Se você estiver usando SCSS / SASS, as variáveis começam com um em $vez de um @, então seria $screen-xs-maxetc.

Estes são os valores do 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){}

Aqui estão dois exemplos.

Quando a janela de visualização tiver 700 px de largura ou menos, crie todas as tags h1 em 20 px.

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

Faça todos os 20px do h1 até que a viewport atinja 700px ou maior.

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

Espero que isso ajude: 0)

Aqui está um exemplo mais modular usando LESS para imitar o Bootstrap sem importar os menos arquivos.

@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) {

}

Com base nas respostas dos outros usuários, escrevi esses mixins personalizados para facilitar o uso:

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(); } }

Exemplo 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; } }

Exemplo de uso:

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

Resultado

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

Desde o Bootstrap v3.3.6, as seguintes consultas de mídia são usadas, o que corresponde à documentação que descreve as classes responsivas disponíveis ( 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 de mídia extraídas do repositório Bootstrap GitHub dos seguintes menos arquivos: -

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

Ou simples 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;
    }
}

Exemplo:

#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;
    }
}

lembre-se de que evitar a escala do texto é o principal motivo da existência de layouts responsivos. toda a lógica por trás dos sites responsivos é criar layouts funcionais que exibam efetivamente seu conteúdo para que seja facilmente legível e utilizável em vários tamanhos de tela.

Embora seja necessário redimensionar o texto em alguns casos, tome cuidado para não miniaturizar seu site e não entenda bem.

aqui está um exemplo de qualquer maneira.

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

}

Lembre-se também de que a janela de exibição 480 foi eliminada no bootstrap 3.

Usamos as seguintes consultas de mídia em nossos arquivos Menos para criar os principais pontos de interrupção em nosso sistema de grade.

/* 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) { ... }

veja também no Bootstrap

você pode ver no meu exemplo os tamanhos de fonte e as cores do plano de fundo estão mudando de acordo com o tamanho da tela

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

Aqui está uma solução de parada única ainda mais fácil, incluindo arquivos responsivos separados com base em consultas de mídia.

Isso permite que toda a lógica de consulta de mídia e a lógica de inclusão precisem existir apenas em uma página, o carregador. Ele também permite que as consultas de mídia não se confundam com as folhas de estilo responsivas.

//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 ficaria assim

/**
* 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 ficaria assim

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

seu índice precisaria carregar o loader.less

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

mole-mole..

O Bootstrap usa principalmente os seguintes intervalos de consulta de mídia - ou pontos de interrupção - em nossos arquivos Sass de origem para nosso layout, sistema de grade e componentes.

Dispositivos pequenos demais (telefones retrato, menos de 576 px) Nenhuma consulta de mídia, xspois esse é o padrão no Bootstrap

Pequenos dispositivos (telefones de paisagem, 576px e superior)

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

Dispositivos médios (tablets, 768px e superior)

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

Dispositivos grandes (desktops, 992px e superior)

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

Dispositivos extra grandes (desktops grandes, 1200px e acima)

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

Como escrevemos nosso CSS de origem no Sass, todas as nossas consultas de mídia estão disponíveis através do Sass mixins:

Nenhuma consulta de mídia é necessária para o ponto de interrupção xs, pois é efetivamente @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 entendê-lo profundamente, acesse o link abaixo

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

tela somente @media e (largura máxima: 1200 px) {}

tela somente @media e (largura máxima: 979px) {}

somente tela @media e (largura máxima: 767px) {}

somente tela @media e (largura máxima: 480 px) {}

tela somente @media e (largura máxima: 320 px) {}

@media (largura mínima: 768 px) e (largura máxima: 991 px) {}

@media (largura mínima: 992 px) e (largura máxima: 1024 px) {}

Use consultas de mídia para o 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) {
}

:)

Na última inicialização (4.3.1), usando SCSS (SASS), você pode usar um dos @mixin de /bootstrap/scss/mixins/_breakpoints.scss

Mídia com pelo menos a largura mínima do ponto de interrupção. Nenhuma consulta para o menor ponto de interrupção. Torna o @content aplicado ao ponto de interrupção especificado e mais amplo.

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

Mídia com no máximo a largura máxima do ponto de interrupção. Nenhuma consulta para o maior ponto de interrupção. Faz o @content se aplicar ao ponto de interrupção especificado e mais estreito.

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

Mídia que abrange várias larguras de ponto de interrupção. Faz o @content se aplicar entre os pontos de interrupção mínimo e máximo

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

Mídia entre as larguras mínima e máxima do ponto de interrupção. Não há limite mínimo para o menor ponto de interrupção e máximo para o maior. Faz com que o @content se aplique apenas ao ponto de interrupção especificado, e não as viewports mais amplas ou mais estreitas.

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

Por exemplo:

.content__extra {
  height: 100%;

  img {
    margin-right: 0.5rem;
  }

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

Documentação:

• introdução https://getbootstrap.com/docs/4.3/layout/overview/#responsive-breakpoints
• migração https://getbootstrap.com/docs/4.3/migration/#responsive-utilities
• variáveis https://getbootstrap.com/docs/4.3/layout/grid/#variables

Feliz codificação;)

Para melhorar a resposta principal:

Você pode usar o atributo de mídia da <link>tag (ele suporta consultas de mídia) para fazer o download apenas do código que o usuário precisa.

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

Com isso, o navegador fará o download de todos os recursos CSS, independentemente do atributo de mídia . A diferença é que, se a consulta de mídia do atributo media for avaliada como falsa , o arquivo .css e seu conteúdo não serão bloqueados pela renderização.

Portanto, é recomendável usar o atributo de mídia na <link>tag, pois garante uma melhor experiência do usuário.

Aqui, você pode ler um artigo do Google sobre esse problema https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-blocking-css

Algumas ferramentas que ajudarão você a automatizar a separação do seu código css em arquivos diferentes, de acordo com suas consultas de mídia

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