DEV Community

Cover image for Técnica para você mudar de pixels(px) para rem!
Gabriel Bittencourt
Gabriel Bittencourt

Posted on

Técnica para você mudar de pixels(px) para rem!

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
}
Enter fullscreen mode Exit fullscreen mode

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 
}
Enter fullscreen mode Exit fullscreen mode

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! 🤭

Oldest comments (3)

Collapse
 
lixeletto profile image
Camilo Micheletto

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;
}

Collapse
 
gabrlcj profile image
Gabriel Bittencourt

Entendi, bem muito obrigado pelo feedback e pela informação! Creio que ajuda a esclarecer esse conceito.

Collapse
 
lixeletto profile image
Camilo Micheletto

Que isso mano! E continue postando sobre, unidades CSS é um assunto extenso e dúvida pra muita gente, parabéns pela iniciativa!