Explicações relacionadas a este exemplo foram utilizadas nas seguintes aulas:
(devido a dinâmica de gravações, não necessariamente todas as aulas que utilizaram o exemplo estarão listadas aqui)
- (aula 124a) Medidas Relativas X Medidas Fixas (módulo 12 - UI)
- (aula 118d) Deu zoom e deu ruim! (módulo 12 - UI)
- (aula 147f) PX, EM, VW, VH, VMIN, VMAX, FR... qual usar e onde usar? (módulo 14 - Design System)
- (aula 187c) Teste de redimensionamento de conteúdo (módulo 18 - Testes)
Importante:
Os exemplos ou códigos apresentados nesta página não necessariamente são os melhores para serem utilizados em um projeto específico. São meros exemplos construídos para explicações mais aprofundadas nas aulas mencionadas.
Exemplos para se aplicar ZOOM (font-size: relativo [REM] X estático [PX])
Zoom teste PX
Lorem ipsum dolor sit amet, consectetur adipiscing. Phasellus erat metus, vehicula a elit in.
Este parágrafo usa
font-size: 16 px
line-height: 24 px
Zoom teste PX
Comprar o produto ABCEste botão usa
font-size: 16 px
width: 300 px
max-width: não aplicado
Zoom teste REM e PX
Lorem ipsum dolor sit amet, consectetur adipiscing. Phasellus erat metus, vehicula a elit in.
Este parágrafo usa
font-size: 1 rem
line-height: 24 px
Zoom teste REM e PX
Comprar o produto ABCEste botão usa
font-size: 16 px
width: 20 rem
max-width: 100%
Zoom teste REM
Lorem ipsum dolor sit amet, consectetur adipiscing. Phasellus erat metus, vehicula a elit in.
Este parágrafo usa
font-size: 1 rem
line-height: 1.5 rem