Distâncias absolutas e relativas
Nessa aula vamos entender sobre distâncias absolutas e relativas.
Distâncias absolutas <length>
- São fixas e não alteram seu valor.
| Unidade | Nome | Equivalência | |----------|---------------------|----------------------| | cm | Centímetros | 1cm = 96px/2.54 | | in | Inches (polegadas) | 1in = 2.54cm = 96px | | px | Pixels | 1px = 1/96th of 1in |
*o mais comum e mais utilizado é o px
*não é recomendado usar cm
Distâncias relativas
- São relativas a um outro valor, pode ser o elemento pai, ou root, ou o tamanho da tela.
- Benefício: Maior adaptação aos diferentes tipos de tela.
| Unidade | Relativo a | |----------|-----------------------------------------------| | em | Tamanho da font do elemento pai | | rem | Tamanho da font do elemento raiz (root/html) | | vw | 1% da viewport wid | | vh | 1% da viewport height |
- Normalmente o tamanho da font padrão do navegador é de
16px
e para mudar esse valor temos que fazer a alteração no root ou no elemento html.
:root { font-size: 18px; } /* OU */ html { font-size: 18px; }
- O viewport é a parte da tela que está sendo exibida. No caso dos navegadores web, é o que é exibido na janela/tela do documento. Conteúdos que estão fora do viewport só serão exibidos quando feito um scroll da área de visualização.
Links úteis
Discord
O grupo é um dos pilares do nosso método e impulsiona tanto o desenvolvimento de habilidades técnicas e comportamentais, quanto a carreira através de conexões profissionais.
Plataforma
Nossa plataforma de aprendizado contínuo reúne todos os nossos programas completos e é a casa dos eventos gratuitos da Rocketseat.