This content originally appeared on DEV Community and was authored by Gabriel Bittencourt
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:
// 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! ?
This content originally appeared on DEV Community and was authored by Gabriel Bittencourt
Gabriel Bittencourt | Sciencx (2021-07-06T13:25:41+00:00) Técnica para você mudar de pixels(px) para rem!. Retrieved from https://www.scien.cx/2021/07/06/tecnica-para-voce-mudar-de-pixelspx-para-rem/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.