Responsividade
Fala Dev!
Responsividade é um assunto muito importante para que nosso layout seja flexível, conforme o dispositivo que o está acessando, seja ele smartphone, tablet ou desktop. (E até mesmo, a impressora sabia?)
Na Masterclass de hoje, vamos usar estratégias de CSS Units para que tanto o nosso Layout, quanto os nossos textos, fiquem fluidos.
Utilizaremos também CSS Media Queries para adicionar CSS customizados conforme o breakpoint definido, para que nosso layout fique adaptado ao viewport do dispositivo.
Além do mais, veremos atributos e tags HTML especiais, para que possamos obter sucesso ao tornar nosso layout responsivo.
Se você ainda não sabe muito bem como fazer layouts responsivos, está começando nesse assunto, está um pouco inseguro, fique tranquilo, vem comigo que eu vou tirar suas dúvidas!
Espero que faça sentido pra você.
Bora codar?
CSS Units
Unidades de medidas do CSS
Layout Fixo
px
- Pixels
Layout Fluido
%
- Porcentagem
auto
- Automática
vh
- Viewport Height
vw
- Viewport Width
Textos fixos
1px
= 0.75pt
16px
= 12pt
Texto fluidos
em
- multiplicado pelo pai
rem
- multiplicado pelo root
CSS Media Queries
No HTMl eu coloco a seguinte tag meta
<meta name="viewport" content="width=device-width, initial-scale=1.0">
No CSS eu uso da seguinte forma
@media (max-width: 320px) {
#form h3 {
font-size: 2rem;
}
}
HTML Media Attrib.
Posso utilizar o atribuito media
no link do meu HTML, ao importar um arquivo css, usando as propriedades da mesma forma que usaria na regra @media
do css.
<link
rel="stylesheet"
href="responsive.css"
media="screen and (max-width: 768px)"
/>
<link rel="stylesheet" href="print.css" media="print">
Imagens
Usamos a tag <picture>
para que as imagens sejam responsivas.
<picture class="image" alt="Imagem">
<source media="(min-width: 768px)"
srcset="https://i.ytimg.com/vi/GykTLqODQuU/maxresdefault.jpg">
<source media="(min-width: 320px)"
srcset="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg">
<source media="(min-width: 10px)"
srcset="https://i.ytimg.com/vi/GykTLqODQuU/mqdefault.jpg">
<img
src="https://i.ytimg.com/vi/GykTLqODQuU/hqdefault.jpg"
alt="Imagem" />
</picture>
Sempre que possível, usar SVG ao invés de JPG, PNG