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 110a) 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)
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 de uso de unidades de medidas
Exemplos de uso de diferentes medidas e seus efeitos na "viewport"
Exemplos de tamanho de texto baseado em "breakpoints"
Este título muda de tamanho conforme o breakpoint
Quando definimos a mudança de tamanho dos textos a partir de breakpoints específicos e a cada breakpoint há uma medica proporcional, as quebras entre um ponto e outro tendem a ser bruscas com diferenças grandes nas adjacências de suas quebras. Já quando definimos o tamanho do texto baseado em uma porcentagem relativa ao tamanho da janela do navegador, a mudança de contexto permanece suave e independente dos breakpoints aplicados.
Exemplos de tamanho de texto baseado em "largura relativa da viewport"
Este título muda de tamanho proporcionalmente conforme o tamanho da janela
Quando definimos a mudança de tamanho dos textos a partir de breakpoints específicos e a cada breakpoint há uma medica proporcional, as quebras entre um ponto e outro tendem a ser bruscas com diferenças grandes nas adjacências de suas quebras. Já quando definimos o tamanho do texto baseado em uma porcentagem relativa ao tamanho da janela do navegador, a mudança de contexto permanece suave e independente dos breakpoints aplicados.