Este artigo explicou em detalhes o conceito de layout responsivo, as vantagens e desvantagens de layout responsivo, conceitos de design e código de implementação específico. É um artigo raro. Aqui recomendamos para os amigos 1. O que é um layout responsivo?
O layout responsivo é um conceito proposto por Ethan Marcotte em maio de 2010. Em resumo, um site pode ser compatível com vários terminais - em vez de criar uma versão específica para cada terminal.
Nasceu esse conceito para resolver a navegação na Internet móvel. O layout responsivo pode fornecer aos usuários de diferentes terminais uma interface mais confortável e uma melhor experiência do usuário. Além disso, com a atual popularização de dispositivos móveis de tela grande, não é um exagero descrevê-lo como uma tendência geral.
À medida que mais e mais designers adotam essa tecnologia, não apenas vemos muitas inovações, mas também alguns modelos formados.
2. Quais são as vantagens e desvantagens do layout responsivo? vantagem:Forte flexibilidade diante de diferentes dispositivos de resolução
Pode resolver rapidamente problemas de adaptação com vários dispositivos
deficiência:Compatível com vários equipamentos, alta carga de trabalho e baixa eficiência
O código é complicado e os elementos ocultos e inúteis aparecerão, o que aumentará o tempo de carregamento.
De fato, esta é uma solução de design de compromisso, que não pode alcançar os melhores resultados devido à influência de vários fatores.
Até certo ponto, a estrutura de layout original do site será alterada e a confusão do usuário ocorrerá
3. Como projetar um layout responsivo?1. Como resolver o problema de compatibilidade entre diferentes dispositivos?
A consulta de mídia no CSS3 pode resolver esse problema.
2. Quais valores podem obter a consulta de mídia?
A largura do dispositivo, o dispositivo-heigth exibe o dispositivo de tela/tátil.
Renderizar a largura e a altura da janela, Hegth exibe a tela/dispositivo tátil.
A direção portátil do dispositivo, orientação horizontal ou vertical (retrato | Lanscape) e impressora, etc.
Impressora da matriz de ponta de razão da proporção de tela, etc.
Proporção de dispositivo Impressora de matriz-dot-ratio-ratio, etc.
A cor da cor ou a cor da cor do objeto, a cor, o índice de cores exibe a tela.
Resolução do dispositivo
3. Estrutura de sintaxe e uso
Sintaxe: apenas o nome do dispositivo @media (selecione condição) não (selecione condição) e (condição de seleção do dispositivo), dispositivo dois {srules}
uso:
um. Exemplo 1: Use @media no link:
<link rel = Stylesheet Type = Text /CSS Media = Somente tela e (Max-Width: 480px), apenas tela e (max-device-width: 480px) href = link.css rel = Nofollow /> externo />
Somente no uso acima pode ser omitido e limitado a um monitor de computador. A primeira condição de largura máxima refere-se à largura máxima da interface de renderização, e a segunda condição max-device-larga refere-se à largura máxima do dispositivo.
b. Incorporar @media na folha de estilo:
Copie o código