Quando recentemente preparado responsivo em @media uso com não muito bem, então eu gravei para fácil visualização
A sintaxe básica:
@media + (não | apenas) + tipo de mídia (consultas de mídia e +) +
Nós primeiro olhar para o tipo de mídia, comumente usado pequeno, em alguns: (tela de computador) tela, print (impressão ou visualização de impressão), todos (todos os dispositivos)
(Este artigo incide diz tela, porque eu recentemente utilizado este, hee hee)
Qual é então o papel deste tipo de equipamento?
A: usado para corresponder à consulta, é o que critérios você quer ir para coincidir com o tamanho da tela é alterada de acordo com as condições para coincidir com a impressão ou a maneira de jogo
Em seguida, por trás (e consultas de mídia +), que é usado para restringir a condição de consulta, por exemplo, quando a tela é menor do que a largura máxima, @ media para desempenhar um papel na classe
Exemplo: Quando a largura do ecrã é menor do que 678px, a cor do fundo é de classe vermelho .box
tela @ media e (max-width: 678px) {
.box {
background-color: red;
}
}
Claro, você também pode consultar os meios de comunicação têm mais restrições
Exemplo: Quando a largura da tela entre 678px para 992px, a cor do fundo é de classe .box vermelho
tela @ media e (min-largura: 678px) e (max-width: 992px) {
.box {
background-color: red;
}
}
As duas últimas eliminatórias, não só
Deixe-me falar somente, para coincidir com o tipo de mídia, isso indica que só se aplica ao tipo de mídia
Exemplos: tipo de tela só funciona para os outros dispositivos de impressão não funcionam como
@ media única tela e (max-width: 678px) {
.box {
background-color: red;
}
}
Não é para os tipos de mídia, além de outros tipos de trabalho
Exemplos: Para o tipo de ecrã tem nenhum efeito, outros tipos de função
@media não tela e (max-width: 678px) {
.box {
background-color: red;
}
}