Artigo Introdução de wulin.com (www.vevb.com): Web design responsivo.
Com a popularidade do 3G, mais e mais pessoas usam seus telefones celulares para navegar na Internet.
Os dispositivos móveis estão superando os dispositivos de desktop e se tornando o terminal mais comum para acessar a Internet. Então, os web designers precisam enfrentar um problema difícil: como eles podem apresentar a mesma página da web em dispositivos de tamanhos diferentes?
A tela de um telefone celular é relativamente pequena, geralmente abaixo de 600 pixels; A largura da tela de um PC geralmente está acima de 1.000 pixels (atualmente a largura principal é de 1.366 × 768) e alguns até atingem 2.000 pixels. Não é fácil obter resultados satisfatórios em telas de tamanhos diferentes.
A solução para muitos sites é fornecer páginas da Web diferentes para diferentes dispositivos, como fornecer uma versão móvel ou versão para iPhone/iPad. Isso garante o efeito, mas é bastante problemático. Requer manutenção de várias versões. Além disso, se um site tiver vários portais, aumentará bastante a complexidade do design da arquitetura.
Portanto, algumas pessoas há muito imaginam se pode ser projetado ao mesmo tempo e geralmente aplicável à mesma página da web se adapta automaticamente às telas de tamanhos diferentes e ajusta automaticamente o layout de acordo com a largura da tela?
1. O conceito de design da web adaptável
Em 2010, Ethan Marcotte propôs o termo design de web responsivo, que se refere a um design da web que pode reconhecer automaticamente a largura da tela e fazer ajustes correspondentes.
Ele fez um exemplo dos retratos dos seis protagonistas das aventuras de Sherlock Holmes. Se a largura da tela for superior a 1300 pixels, 6 imagens estarão em uma linha lado a lado.
Se a largura da tela estiver entre 600 pixels e 1300 pixels, as 6 imagens serão divididas em duas linhas.
Se a largura da tela estiver entre 400 pixels e 600 pixels, a barra de navegação se moverá para a cabeça da página.
Se a largura da tela estiver abaixo de 400 pixels, 6 imagens serão divididas em três linhas.
MediaQueri.es tem mais exemplos como este acima.
Há também um widget de teste aqui, que pode exibir os efeitos do teste das telas com diferentes resoluções em uma página da web ao mesmo tempo. Eu recomendo instalá -lo.