Atualize o tamanho da fonte para unidades REM

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

EXEMPLO AO VIVO

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