O que é uma consulta de mídia?
consulta de mídia é uma técnica CSS introduzida no CSS3.
Ele usa o @media regra para incluir um bloco de propriedades CSS somente se uma determinada condição é verdadeira.
Exemplo
Se a janela do navegador for menor que 500px, a cor de fundo muda para azul claro:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
Tente você mesmo " Adicione um ponto de interrupção
Anteriormente neste tutorial nós fizemos uma página web com linhas e colunas, e foi responsivo, mas não ficam bem em uma tela pequena.
consultas de mídia pode ajudar com isso. Nós podemos adicionar um ponto de interrupção em que certas partes do desenho irão comportar-se de forma diferente em cada lado do ponto de interrupção.
Área de Trabalho
Telefone
Use uma consulta de mídia para adicionar um ponto de interrupção na 768px:
Exemplo
Quando a tela (janela de navegador) se torna menor do que 768px, cada coluna deve ter uma largura de 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width:
100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
Tente você mesmo " Sempre design for Mobile Primeira
Móvel Em primeiro lugar significa projetar para dispositivos móveis antes de projetar para o desktop ou qualquer outro dispositivo (Isso fará com que a exibição da página mais rápido em dispositivos menores).
Isto significa que temos de fazer algumas mudanças em nosso CSS.
Em vez de mudar estilos quando a largura fica menor do que 768px, devemos mudar o projeto quando a largura fica maior do que 768px. Isso fará com que nosso projeto móvel Primeiro:
Exemplo
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
Tente você mesmo " outro ponto de interrupção
Você pode adicionar quantos pontos de interrupção como você gosta.
Nós também irá inserir um ponto de interrupção entre tablets e telefones celulares.
Área de Trabalho
Comprimido
Telefone
Fazemos isso através da adição de mais uma consulta de mídia (pelo 600px), e um conjunto de novas classes de dispositivos maiores que 600px (mas menor do que 768px):
Exemplo
Note-se que os dois conjuntos de classes são quase idênticos, a única diferença é o nome ( col- e col-m- ):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width:
768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
} Tente você mesmo " Pode parecer estranho que temos dois conjuntos de classes idênticas, mas nos dá a oportunidade em HTML, para decidir o que vai acontecer com as colunas em cada ponto de interrupção:
Exemplo HTML
Para área de trabalho:
A primeira ea terceira parte, ambas abrangem 3 colunas cada. A seção do meio terá uma duração de 6 colunas.
Para os comprimidos:
A primeira seção terá uma duração de 3 colunas, o segundo terá uma duração de 9, ea terceira seção será exibida abaixo das duas primeiras seções, e terá uma duração de 12 colunas:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div
class="col-6 col-m-9">...</div>
<div
class="col-3 col-m-12">...</div>
</div>Orientação: Retrato / Paisagem
consultas meios podem também ser usados para mudar a disposição de uma página, dependendo da orientação do navegador.
Você pode ter um conjunto de propriedades CSS que só se aplica quando a janela do navegador é maior do que sua altura, um chamado orientação "paisagem":
Exemplo
A página web terá um fundo azul claro se a orientação está no modo paisagem:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
} Tente você mesmo "