[Tutorial] Fontes responsivas - CSS3

Olá amigos,

Hoje trago a vocês algumas novas features do CSS3, um método bem inovador de fontes responsivas..

Ja adianto que o suporte nos browsers ainda não é 100%, mas ja da para brincar um pouco

Confiram a tabela de compatibilidade
[Tens de ter uma conta e sessão iniciada para poderes visualizar este link]

Enfim, vamos falar dos métodos chamados vw (viewport width) e vh (viewport height).

Esse método de fonte se adequade acordo tamanho do monitor, seja baseado no width (vw) ou no height (vh), é realmente muito interessante seu uso façam os testes em uma página HTML

Código:

       <h1>viewportwidth</h1>
        <h2>viewportheight</h2>

Código:

h1{
    font-size: 10vw;
}
h2{
    font-size: 10vh;
}

Redimensionem a janela na vertical e na horizontal e vejam o efeito. Bem bacana né?

Como funciona?
Na verdade é bem simples, tanto o vw, como o vh equivalem a 1% do seu monitor, ou seja, se o seu monitor tem 50cm, a fonte se equivale a .5cm (monitor no caso é o viewport do seu navegador, por isso ao redimensionar a fonte se adequa ao tamanho)...

Fallback

Então você ja sabe como usar fontes responsivas, legal! Mas e se quisermos continuar dando suporte aos navegadores que ainda não podem usar essa propriedade?

Na verdade, é bem simples, basta adicionar a regra antiga junto com a nova. Vejam:

Código:

element{
    font-size: 10em; /* fallback */
    font-size: 10vw;
}

Ali pode ser qualquer coisa como px, em %, como você preferir...


Legal, aprendemos a fazer fontes responsivas e a dar um fallback para browsers antigos, espero que possam apreciar bem essa nova feature, e usem com moderação

Abraços...

Vou ser isso.. Boa partilha continua.