Muitos sites estão usando unidades de pixel que são difíceis de ajustar na crescente variedade de dispositivos diferentes.
CSS3 apresenta algumas novas unidades, incluindo a unidade REM, que significa “root em”.
Então, como estamos usando o REM?
digamos que temos este CSS:
CSS
article h2 {font-size:20px;}
article p {font-size:12px;}
Em primeiro lugar, precisamos decidir qual tamanho de px será em relação a todas as fontes. e para facilitar, a prática recomendada que fiz é criar root font-size de 1px assim:
CSS
html {font-size:1px;}
Em segundo lugar, precisamos substituir o restante dos valores de tamanho da fonte de pixel para unidades rem.
CSS
article h2 {font-size:20rem;}
article p {font-size:12rem;}
O que REM faz, ele pega 20REM e multiplica pelo elemento raiz:
20 REM * 1 PX = 20PX.
Suporte de navegador
O IE7 e o IE8 ainda precisam usar valores PX. Isso nos forçará a escrever o tamanho da fonte duas vezes, uma vez em PX e a segunda vez em REM.
CSS
article h2 {font-size:20px; font-size:20rem;}
article p {font-size:12px; font-size:12rem;}
Por que as unidades REM são boas para você?
Vamos supor que precisamos aumentar todas as fontes em nosso site em 20%, tudo o que temos que fazer é alterar o tamanho da fonte no elemento raiz, assim:
html {font-size:1.2px;}
Se você quiser reduzir em 20%, fará assim:
html{font-size:0.8px;}
Muito bom e fácil!
REM para Design Responsivo
Quando você deseja alterar todo o tamanho da fonte de acordo com os pontos de interrupção em seu design responsivo, é muito mais fácil. Consultar exemplo:
@media (min-width: 320px){
html{
font-size:1.4px;
}
}
@media (min-width: 600px){
html{
font-size:1.2px;
}
}
Agora, em telas menores, redimensionamos todas as fontes em 40% maiores, e em telas médias, redimensionamos em 20% maiores.
Usando menos para resolver as necessidades de escrever tudo duas vezes – para suportar navegadores antigos
em menos ou atrevimento você pode adicionar funções para economizar o tempo de escrever tudo duas vezes.
less – função font-size e chamando-a
.font-size(@font-size) {
font-size : @font-size * 1px;
font-size : @font-size * 1rem;
}
article h2 {
.font-size(20);
}
O CSS compilado terá a seguinte aparência:
article h2{
font-size:20px;/*Support IE7 & IE8*/
font-size:20rem;
}
Aproveitar!
Se gostou desta dica, terei todo o gosto em receber o seu LIKE. Você está convidado a me seguir e endossar minhas habilidades.
Elad Shechter