Guia de Design Responsivo

Prévia do material em texto

16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 1/7
GRÁF�COS / DES�GN RESPONS�VO
Fundamentos de design responsivo
Começ�ndo
À medida que o desenvolvimento web evolui, também evolui a maneira como
construímos e projetamos sites. Com o aumento constante dos smartphones e
outros dispositivos móveis, tornou-se cada vez mais valioso garantir que os sites
tenham uma boa aparência e funcionem corretamente em diferentes tamanhos de
tela.
É aí que entra o design responsivo. Ao contrário de outros conceitos, não é apenas
uma palavra da moda que a indústria gosta de lançar por aí. É um aspecto com o
qual todo desenvolvedor precisa se acostumar, e começar cedo pode ajudá-lo a
alcançar o domínio no futuro e contribuir tremendamente para projetos futuros.
Ao usar layouts flexíveis, consultas de mídia e outras técnicas, o design responsivo
garante que os sites possam ser usados em qualquer dispositivo, de computadores
desktop a smartphones.
Compreendendo os fund�mentos do desi�n responsivo
O design responsivo consiste na criação de layouts flexíveis que se adaptam ao
tamanho da janela de visualização . Simplificando, a janela de visualização é a área
visível da tela na qual o site é exibido. Podemos conseguir isso através de uma
combinação de técnicas, incluindo consultas de mídia, grades flexíveis e imagens
responsivas, para citar algumas.
Consult�s de mídi�: �d�pt�ndo-se � diferentes
t�m�nhos de tel�
https://webreference.com/graphics
https://webreference.com/graphics/responsive-design
16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 2/7
Consultas de mídia são uma técnica CSS que nos permite aplicar diferentes estilos
com base no tamanho da janela de visualização. Podemos especificar um estilo que
se aplica apenas a determinados tamanhos de tela, garantindo que o site se
comporte adequadamente em vários dispositivos.
Logicamente, devemos primeiro nos familiarizar com a sintaxe e ver como podemos
aplicá-la. Vamos observar um exemplo de sintaxe simples de uma consulta de mídia
em ação, onde reduzimos o tamanho da fonte em telas menores.
@media (max-width: 640px) {
 body {
 font-size: 16px;
 }
}
Primeiro, a consulta de mídia verifica a largura da janela de visualização. Se a
viewport for menor ou igual a 0 pixels, os estilos dentro da media query serão
aplicados. Além disso, o tamanho da fonte do elemento body será definido para 1
pixels.
Poderíamos enfrentar um desafio ao tentar cobrir todas as telas possíveis.
Normalmente, para evitar isso, usamos consultas de mídia para criar pontos de
interrupção em tamanhos de tela comuns.
/* Default styles for all screens */
body {
 /* Add your default styles here */
}
/* Styles for mobile devices */
@media (max-width: 480px) {
 body {
 /* Add styles specific to mobile devices here */
 }
}
/* Styles for iPads and tablets */
@media (min-width: 481px) and (max-width: 768px) {
 body {
 /* Add styles specific to iPads and tablets here */
 }
}
16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 3/7
/* Styles for small screens and laptops */
@media (min-width: 769px) and (max-width: 1024px) {
 body {
 /* Add styles specific to small screens and laptops here */
 }
}
/* Styles for desktops and large screens */
@media (min-width: 1025px) and (max-width: 1200px) {
 body {
 /* Add styles specific to desktops and large screens here */
 }
}
/* Styles for extra large screens, such as TV */
@media (min-width: 1201px) {
 body {
 /* Add styles specific to extra large screens, such as TV, here */
 }
}
Como você deve ter notado, implementamos intervalos diferentes para cada
tamanho de tela. Temos a consulta padrão definida primeiro e as subsequentes que
podem conter estilos variados, como espaçamento, fontes, cores e muito mais,
aplicando-se apenas aos intervalos especificados. Com esta abordagem o nosso
website poderemos utilizá-lo em quase todos os ecrãs, desde pequenos
dispositivos móveis até grandes ecrãs de TV.
Observe que quando usamos consultas de mídia devemos aderir a uma abordagem
“mobile first”. Isso significa que os estilos para telas menores são definidos primeiro
e depois abordamos as telas maiores.
Gr�des CSS p�r� desi�n responsivo
CSS Grid é um sistema de layout bidimensional que nos permite criar designs
complexos baseados em grade. Ao definir o número de colunas e linhas em sua
grade, bem como o tamanho de cada célula, podemos usar esta abordagem para
controlar o posicionamento dos elementos na página e garantir que nosso layout se
ajuste corretamente.
Os modelos de grade são uma das abordagens que podemos utilizar. Para começar,
precisamos definir a display propriedade do elemento container grid em nosso
16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 4/7
documento CSS. Então, podemos definir o número de colunas e linhas na grade
usando as propriedades grid-template-columns e grid-template-rows . Além disso,
podemos especificar o tamanho de cada célula usando fr unidades, que significa
“fração do espaço disponível”.
Vamos ilustrar um exemplo básico criando um layout de três colunas.
<div class="container">
 <div class="item">Item 1</div>
 <div class="item">Item 2</div>
 <div class="item">Item 3</div>
</div>
.container {
 display: grid;
 grid-template-columns: repeat(3, 1fr);
 grid-template-rows: auto;
 grid-gap: 10px;
}
.item {
 background-color: lightgray;
 padding: 20px;
 text-align: center;
}
A configuração que usamos produzirá os itens organizados em uma grade de três
colunas, com cada coluna ocupando uma fração igual do espaço disponível. Além
disso, a grid-gap propriedade adiciona algum espaço entre as colunas e linhas.
Curiosamente, podemos aproveitar a repeat função para especificar o número de
colunas que precisamos. Então, isso significa que podemos criar grades com um
número fixo de colunas, mas também podemos usar outros valores para criar
estruturas de grade mais complexas.
“Confira nosso guia detalhado com uma abordagem alternativa usando CSS
Flexbox .”
Us�ndo Estrutur�s
https://webreference.com/css/flexbox
https://webreference.com/css/flexbox
16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 5/7
Como sempre, também podemos recorrer a algumas opções de estrutura. Essas
estruturas fornecem soluções convenientes, como componentes e estilos pré-
construídos que podem facilitar nosso processo geral e geralmente incluem
sistemas de grade integrados, bem como outros recursos responsivos. Algumas
opções incluem Bootstrap, Foundation e Bulma.
Mas às vezes a conveniência tem um custo. Um problema é que eles podem
adicionar inchaço extra ao nosso site, tornando-o mais lento e menos eficiente.
Outro problema potencial é que eles podem limitar nossas opções de
personalização em termos de escolhas de design enquanto trabalhamos dentro das
restrições da estrutura.
Finalmente, usar frameworks também significa que temos que contar com terceiros
para atualizações e manutenção. Se a estrutura não for mantida ou se tornar
obsoleta, poderemos encontrar problemas de funcionalidade ou vulnerabilidades de
segurança.
�m��ens responsiv�s
Devemos considerar outro aspecto vital. Ao usar o srcset atributo, podemos
especificar diferentes versões de uma imagem para diferentes tamanhos de tela. O
principal benefício disso é eliminar a necessidade de carregar resoluções maiores se
não houver necessidade.
<img src="small.jpg"
 srcset="large.jpg 1024w,
 medium.jpg 640w,
 small.jpg 320w"
 sizes="(max-width: 1024px) 1024px,
 (max-width: 640px) 640px,
 320px"
 alt="A beautiful sunset">
O navegador escolherá a melhor imagem para exibir combase no tamanho da janela
de visualização. Portanto, se a janela de visualização tiver 20 pixels de largura, ela
exibirá a imagem “small.jpg”, ou se tiver 102 pixels de largura, irá com a imagem
“large.jpg”.
Referência da
Web
https://webreference.com/
16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 6/7
“Saiba mais sobre formatos de imagem em nosso Guia de Gráficos em
Desenvolvimento Web”
Pens�mentos fin�is
Com essas técnicas, você terá uma base sólida para começar a experimentar a
capacidade de resposta.
No entanto, nosso campo está em constante evolução e sempre há novidades no
horizonte. Mantenha-se atualizado e não hesite em procurar ajuda se tiver dúvidas.
Recomendamos que você dê uma olhada na comunidade de desenvolvedores da
Web e poste perguntas sobre suas preocupações.
E lembre-se, a chave para o sucesso é ter uma boa compreensão dos princípios
fundamentais e uma vontade de refinar e iterar.
Recursos úteis
Introdução ao CSS
A estrutura Bootstrap
O site oficial da fundação
Uma abordagem moderna para CSS com Bulma
Conceitos
Domínios
HTML 101
Estilos CSS
Noções básicas de JavaScript
Guia de gráficos
Recursos
Fullres
JSON Lint
Design.dev
Desenvolvedor Web
Empregos autênticos
https://webreference.com/graphics/
https://webreference.com/graphics/
https://webdeveloper.com/
https://webdeveloper.com/
https://webreference.com/css/
https://getbootstrap.com/
https://foundation.zurb.com/
https://bulma.io/
https://webreference.com/domains
https://webreference.com/html
https://webreference.com/css
https://webreference.com/javascript/basics
https://webreference.com/graphics
https://fullres.com/?ref=web-reference
https://jsonlint.com/?ref=web-reference
https://design.dev/?ref=web-reference
https://webdeveloper.com/?ref=web-reference
https://authenticjobs.com/?ref=web-reference
16/05/2024, 05:20 A guide to responsive design for web developers
https://webreference.com/graphics/responsive-design/ 7/7
Folhas de dicas
Codificação de IA
Popular
Cores HTML
Caixa flexível
ECMAScript
Atalhos de código VS
Dicionários Python
Estruturas JS
Folha de dicas do NPM
Cores.to
Editor de redução
Sobre
Privacidade
Termos
© 202 Referência da Web. Todos os direitos reservados.
https://webreference.com/cheat-sheets
https://webreference.com/ai
https://webreference.com/html/colors
https://webreference.com/css/flexbox
https://webreference.com/javascript/basics/versions
https://webreference.com/cheat-sheets/vscode
https://webreference.com/python/basics/dictionaries
https://webreference.com/javascript/frameworks
https://webreference.com/cheat-sheets/npm
https://colors.to/?ref=web-reference
https://markdowneditor.org/?ref=web-reference
https://webreference.com/
https://webreference.com/