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?
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?
Respostas:
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>
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.
<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>
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) {
}
min-width
, mas você max-width
também usou , então qual é a diferença?, É necessário?
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-max
e @screen-md-max
, que são 1 pixel a menos que @screen-md-min
e @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-max
etc.
$screen-xs-max
etc. (E se estiver usando LESS / SCSS localmente, mas importando a versão CSS do Bootstrap, você está sem sorte.)
@screen-tablet
, @screen-desktop
E @screen-lg-desktop
foram reprovados. Talvez seja hora de atualizar sua resposta já incrível. ;-)
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){}
and
condições. @ JasonMiller, portanto, não é exatamente um "must", depende das especificações e dos requisitos do modelo.
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)
font-size: 20px
para h1
marcas em ambos os casos. Para uma melhor compreensão, você pode usar diferentes font-size
conforme solicitado em questão. BTW ainda está tudo bem.
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:
.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;
});
}
@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;
}
}
@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
@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;
}
}
#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, xs
pois 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
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:
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