Twitter Bootstrap 3: como usar consultas de mídia?


Respostas:


651

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.


116
Apenas 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>
William Entriken

14
+1 para solicitar consultas, aumentando o tamanho da tela, mantendo a consistência com a metodologia mobile-first do BS3.
Jake Berger

5
E 480px (@ screen-xs)? Isso apareceu mais tarde? Entendi daqui .
brejoc

11
Para ser consistente com o BS3, use as variáveis ​​de tamanho de tela padrão para cada viewport. Veja: stackoverflow.com/a/24921600/2817112
Oriol

11
@brejoc BS3 + é "mobile-first" - a visão "XS" (móvel) é o modo de exibição padrão em BS3 + ...
jave.web

252

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

}

Aqui, a resposta com alta votação usa apenas min-width, mas você max-widthtambém usou , então qual é a diferença?, É necessário?
shaijut 23/10

Como o bootstrap sabe se o telefone está no modo retrato?
SuperUberDuper

@SuperUberDuper não. Ele lida apenas com os elementos de acordo com o tamanho horizontal da janela de visualização, em vez do layout da tela.
Chris Clower

O pedido não deve ser de BAIXO a ALTO?
Prisioneiro ZERO

134

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.


11
Quando eu quero editar dados no .grid.less sempre é sobrescrito do estilo principal. Existe alguma solução ou eu só preciso de todo o estilo que adicionei nas consultas de mídia para adicionar! Importante?
Edonbajrami

2
Não consigo fazer isso funcionar. O compilador reclama se eu uso algo além de um número codificado.
Laertiades

7
@JesseGoodfellow o exemplo acima usa a sintaxe LESS; se você estiver usando SASS / SCSS github.com/twbs/bootstrap-sass/blob/master/vendor/assets/… , desejaria $screen-xs-maxetc. (E se estiver usando LESS / SCSS localmente, mas importando a versão CSS do Bootstrap, você está sem sorte.)
carpeliam

2
@screen-tablet, @screen-desktopE @screen-lg-desktopforam reprovados. Talvez seja hora de atualizar sua resposta já incrível. ;-)
Slipp D. Thompson

2
Supondo que você construa um bootstrap; isso deve ser marcado como a resposta #
6195 sidonaldson

44

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

4
Essa é a resposta correta. Deve ter condições "e"
Jason Miller

Para permitir que telas grandes usem o css do css da tela Média, remova as andcondições. @ JasonMiller, portanto, não é exatamente um "must", depende das especificações e dos requisitos do modelo.
Onimusha

29

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)


Você usa font-size: 20pxpara h1marcas em ambos os casos. Para uma melhor compreensão, você pode usar diferentes font-sizeconforme solicitado em questão. BTW ainda está tudo bem.
FWd82

21

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

}

Tentei isso. Funciona perfeitamente!
Tomas Gonzalez

21

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

20

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


12

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

Obrigado. Eu estava procurando por algo que desse exemplos do bootstrap sass mixin (o próprio exemplo do bootstrap é complicado com todo o conteúdo). Isso explica muito! :)
CleverNode

11

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.


6

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


5

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>


2

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


Oi, eu estou tentando usar menos de 2 dias no bootstrap, mas ainda está tentando. Por favor, me ajude a respeito de menos uso no Windows. li muitos artigos e artigos, mas não encontrei soluções adequadas, acho que você pode me ajudar. Agradecemos antecipadamente
Muddasir Abbas 13/15

você precisa incluir a biblioteca menos javascript, para que seu aplicativo saiba o que fazer com esses arquivos. depende de como você inclui menos em seu aplicativo. eu uso uma biblioteca encontrada no github, via assetic. você não precisa fazer isso. você pode apenas incluir o arquivo javascript e, em seguida, carregar seu arquivo menor por meio de uma metatag padrão no estilo css. você não se preocupa com a compilação. essa informação está aqui. lesscss.org/#client-side-usage .
blamb

2

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/


1

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


0

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

0

:)

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:

Feliz codificação;)


-1

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

Ao utilizar nosso site, você reconhece que leu e compreendeu nossa Política de Cookies e nossa Política de Privacidade.
Licensed under cc by-sa 3.0 with attribution required.