O que é Web Design Responsivo

• Pode 16, 2024

Existem três características principais de um web design responsivo, que são layouts fluidos, imagens redimensionáveis ​​e consultas de mídia. As consultas de mídia não são tão novas no design da web. Começando como tipos de mídia no CSS2.1, poderíamos projetar folhas de estilo para a Web e para impressão, garantindo um pouco que a página da Web teria a mesma aparência na tela e quando impressa. Isso progrediu para consultas de mídia no CSS3. Essa consulta verifica a largura do dispositivo de mídia (largura máxima do dispositivo) e testa-a em relação a um valor definido como 480px ou 768px. Em resposta a esta consulta, usamos estilos CSS para alterar o layout do fluido e redimensionar as imagens para a tela.

Você pode facilmente testar se um site tem um design responsivo. Comece com o navegador na largura total da tela do seu computador. Em seguida, arraste a borda direita do navegador para a esquerda para reduzir a largura da janela do navegador. Você deve ver as imagens ficarem menores e o layout pegará os divs flutuantes lado a lado e os empilhará verticalmente. Por exemplo, se tivermos seis imagens (seis divs) por linha em uma página da galeria em tela cheia, à medida que reduzimos a largura da tela, o número de imagens em uma linha será progressivamente reduzido e empilhado, conforme necessário. Uma vez que a largura é reduzida para uma certa quantidade, as próprias imagens começarão a ser redimensionadas em tamanho menor. Se você prestar atenção, verá também que certos elementos de design, como os links de navegação, podem ser reduzidos a um ícone ou até desaparecer. Isso também é controlado pela folha de estilo CSS.

Ao criar sites, considere não apenas como os elementos de design da página terão a largura da tela cheia, mas também como eles ficarão quando empilhados. Considere quais elementos de design podem ser removidos da tela com uma largura menor, sem reduzir a funcionalidade do site. Como os recursos e a tecnologia do design responsivo estão mudando rapidamente, acompanhar todos os aprimoramentos pode ser demorado. Se você prefere gastar seu tempo projetando em vez de codificar, dê uma olhada em alguns dos belos temas responsivos disponíveis para o Wordpress. Se você é uma pequena empresa de design, considere começar com um desses layouts de temas responsivos ao criar sites.

Instruções De Vídeo: Design Responsivo - O que é Web Design Responsivo? Aula 01 (Pode 2024).