Web design responsivo - consultas de mídia
Media (mídia) introduziram uma consulta em CSS3: consultas @media CSS3 .
Use @media consultas, você pode definir diferentes estilos para diferentes tipos de mídia.
Exemplos
Se a janela do navegador for menor que 500px, o fundo muda para azul claro:
body {
background-color: lightblue;
}
}
tente »
Adicione um ponto de interrupção
No tutorial anterior nós usamos as linhas e colunas para criar páginas web, ele é sensível, mas na tela pequena e não mostram amigável.
consultas de mídia pode nos ajudar a resolver este problema. Podemos adicionar um ponto de interrupção no meio do projecto de design, diferentes pontos de interrupção têm efeitos diferentes.
Área de Trabalho
Os dispositivos móveis
Use consultas de mídia 768px adicionar pontos de interrupção:
Exemplos
Quando a tela (janela de navegador) é inferior a 768px, a largura de cada coluna é 100%:
.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 »
Prioridade para o projeto do terminal móvel
Prioridade significa desktops finais móveis e outros aparelhos concebidos para dar prioridade ao projeto do terminal móvel.
Isto significa que nós temos que fazer algumas alterações para o CSS.
Nós tela inferior a 768px em mudanças de estilo precisam ser modificados no mesmo estilo quando a tela é maior do que 768px. Os seguintes são exemplos de prioridade end móvel:
[Class * = "col-"] {
width: 100%;
}
@media única tela e (min-width : 768px) {
/ * Para área de trabalho: * /
.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% ;}
}
outros pontos de interrupção
Você pode adicionar um ponto de interrupção de acordo com as suas necessidades.
Podemos também dispositivos de tablet e telefone móvel definir pontos de interrupção.
Área de Trabalho
comprimido
Os dispositivos móveis
600px tela quando a adição de consultas de mídia, e definir o novo estilo (mas menos do que a tela é maior do que 600px 768px):
Exemplos
Note-se que dois estilos de classe são os mesmos, mas nomes diferentes (col- e col-m-):
[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 »
O código acima parece mais do que um monte, mas ele pode ser ajustado automaticamente de acordo com o tamanho da tela de estilos diferentes, por isso ainda é muito necessário.
Exemplos HTML
Para área de trabalho:
A primeira ea terceira seção abrangendo três. porção intermediária cross-domain 6.
Para dispositivos tablet:
O primeiro cross-domain 3, a segunda seção que mede 9, a terceira parte de um cross-domain 12:
<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>
Direção: tela horizontal / vertical da tela
Combinado com consultas de mídia CSS, você pode criar adaptar-se a diferentes orientação do dispositivo (paisagem paisagem, retrato retrato, etc.) layout.
sintaxe:
orientation：portrait | landscape
- retrato: especificar o dispositivo de saída na região visível da altura da página é maior do que ou igual à largura
- paisagem: o valor de circunstâncias inter-retrato é paisagem
Exemplos
Se o fundo vertical da tela será azul claro:
body {
background-color: lightblue;
}
}
tente »