Skip to main content
Não use stacksnippets sem necessidade, eles não são pra formatar e sim pra executar códigos js+css+html que façam alguma coisa, se não for pra fazer nada use a marcação normal..
Fonte Link
Syzoth
  • 100,5mil
  • 23
  • 169
  • 361

---------------------------------------------------------**********---------------------------------------------------------------

 

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

body{
    font-size: 8vw;  
}

body{
    font-size: 8vw;  
}

---------------------------------------------------------**********---------------------------------------------------------------

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

body{
    font-size: 8vw;  
}

 
body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}
/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}
body{
    font-size: 8vw;  
}
adicionou 303 caracteres ao conteúdo
Fonte Link

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viweportviewport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.

---------------------------------------------------------**********---------------------------------------------------------------

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viweport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.

---------------------------------------------------------**********---------------------------------------------------------------

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viewport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.

---------------------------------------------------------**********---------------------------------------------------------------

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}

adicionou 303 caracteres ao conteúdo
Fonte Link

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viweport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.

---------------------------------------------------------**********---------------------------------------------------------------

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

Edição 1

Bem, eu li erroneamente a pergunta e acabei respondendo sobre responsividade de acordo com a viweport. Correndo o risco de ter votos negativos, deixarei minha resposta, mesmo errada, porque pode ser útil.

---------------------------------------------------------**********---------------------------------------------------------------

Você pode conseguir responsividade na tipografia usando somente CSS.

Primeiro, você pode recorrer à unidade em ou à %:

body {
    /**
    Faz a fonte ficar 2 vezes maior que o normal
    **/
    font-size: 2em;
    /**
    Fonte 95% do tamanho do normal
    font-size: 95%;
    **/
}

Ou ainda, aliar esses tipos de fonte com media queries ou, ainda, usar as media queries com os tamanhos de fonte para cada tamanho de tela:

/**
    Tela com até 600px
**/
@media (max-width: 600px){
    body{
        font-size: 10px;
    }
}

/**
    Tela com até 959px, maior que 600px
**/
@media (max-width: 959px){
    body{
        font-size: 14px;
    }
}
/**
    Tela com 960px +
**/
@media (min-width: 960px){
    body{
        font-size: 14px;
    }
}

A melhor solução CSS

Use a unidade vw

body{
    font-size: 8vw;  
}

Fonte Link
Carregando