Hoje eu vim falar um pouco de uma técnica que achei super importante e prática para o dia a dia, mas primeiro o que seria rem?
Bem para trazer uma breve explicação, rem significa "The root element's font-size", ou em português, "O tamanho de fonte raiz do elemento".
Tá, mas o que isso quer dizer???
Muito simples! Essa medida se refere ao tamanho do elemento raiz, o root, e ele pode ser alterado via CSS dessa maneira:
:root {
font-size: 100%; // 100% = 16px
}
Agora vem o truque que vai facilitar sua vida!!!
Como nos podemos alterar esse valor, e 100% é igual a 16px, seria muito mais fácil trabalhar com essa unidade se fosse por exemplo, 10px e a gente pode alterar pra ser 10px! E eu mostro pra você como fazer isso: (Porém cuidado ao usar, pois ela é afetada diretamente pelo zoom e pelas configurações do usuário)
// Se usarmos uma simples regra de 3 podemos fazer esse calculo
//16px - 100%
//10px - ?
// E o resultado disso é...
:root {
font-size: 62.5%; // 62.5% = 10px
}
// Utilizando dessa maneira
body {
margin: 1.2rem .8rem; // Que seriam 12px e 8px, respectivamente
}
Considerações finais
Eu posso dizer que esse método é muito bom até porque a unidade rem acaba sendo responsiva o que é mais um ponto forte para a sua utilização, e se você tem alguma outra maneira ou alguma "gambiarra" conta ai pra mim! 🤭
Top comments (3)
Bom horário local mano, espero que tu esteja bem!
Sobre esse hack eu nao recomendo que ele seja utilizado por não ser acessível. Um dos requisitos WCAG é que a fonte se adapte ao zoom da tela, coisa que o rem faz direto da caixa por ser uma medida responsiva, qualquer redefinição do valor do rem (que é o valor inicial do root font size) afeta diretamente na qualidade do zoom e nas preferências do usuário.
Aqui uma fonte que elabora melhor esse ponto:
24a11y.com/2019/pixels-vs-relative...
Há fontes dizendo que o rem é afetado pelo tamanho da fonte da preferência do sistema, porém não encontrei essa informação na documentação oficial da w3, mas caso seja verdade, modificar o root font size de qualquer forma é ainda mais problemático
O que vc pode fazer é redefinir isso em uma variável CSS
--custom-f-size: 62.5%;
E aplique em classes utilitárias
.heading-1 {
font-size: calc(var(--custom-f-size) * etc etc;
}
Entendi, bem muito obrigado pelo feedback e pela informação! Creio que ajuda a esclarecer esse conceito.
Que isso mano! E continue postando sobre, unidades CSS é um assunto extenso e dúvida pra muita gente, parabéns pela iniciativa!