Jump to content
Derme

Resolução em tamanho de telas diferentes

Recommended Posts

Eu gostaria de saber como faço em css, para quando o tamanho de tela for menor, como de Smartfones, eu aumentar automaticamente o tamanho da fonte, sem precisar mexer em cada classe.

 

Tipo: aumentar todas as fontes em 20%

 

Tem como? fazer isso na própria folha de estilos sem precisar criar outra secundária?

Tem como criar uma condicional na própria css levando em conta o tamanho da tela?

Share this post


Link to post
Share on other sites

Para alterar em determinado tamanho de tela você utiliza o @media e para aumentar a fonte de todos os elementos de uma vez você pode usar o *. Por exemplo:

@media(max-width: 1000px){

*{
font-size: 22pt
}

} 

Nesse exemplo, se a tela for menor que 1000 pixels, a fonte de todos os elementos será 22, porém se você já modificou a font de um elemento com ou sem classe, não vai funcionar no elemento modificado, se for esse o caso, recomendo que você crie mais uma classe em todos os elementos necessários para fazer o que quer. Por exemplo:

<div class='sua-classe font'></div>

Na classe font você coloca o tamanho que deseja dependendo do tamanho da tela.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Similar Content

    • By Patrick Cardoso
      Dúvida:
      Trabalho com SEO e estamos pensando sobre investir no desenvolvimento de páginas AMP, mas não sabemos sobre suas reais vantagens a nível SEO.
      Sei que o Google prioriza páginas rápidas (principal foco das páginas AMP), mas minha pergunta é: o Google promove algum tipo de prioridade adicional para sites adeptos a esta nova tecnologia? Existe algum artigo que fale sobre? Vale a pena tamanho investimento?
       
      Grato!
    • By Marcosvn
      A média de sessão do meu site no Google Analytcs ta em 29 segundos. Porém, eu descobri que oque ta afetando essa métrica (a qual deveria estar em pelo menos 1 minuto) é o simples fato de que os links internos da minha página AMP, estão redirecionando para a página não AMP. Embora o código do analytcs seja o mesmo eu não sei pq o google recomeça a contagem quando o usuario click num link interno e é redirecionado pra pagina não amp.
       
      É um assunto relevante, pois o google considera o tempo de visita como um fator importante para o SEO, mas não entendo pq ele recomeça a contagem quando o usuario sai da pagina amp e vai para a não amp.
       
      Alguém já percebeu este problema ??
    • By Elze
      Baixei um template para blogger em AMP e gostaria de saber como alterar as fontes e cores dos títulos e postagens? Quais os códigos dentro do HTML eu devo procurar para alterar as fontes e cores?
    • By tony_lu
      Boa tarde pessoal, gostaria de uma informação sobre páginas em AMP, vi que este formato ajuda no SEO de um site, porem não tenho ideia de como fazer, seria uma outra versão de um site para celular?  E a versão responsiva seria desconsiderada quando apontar essa versão AMP para o google? Queria entender melhor sobre isso,  alguem que ja trabalhe com AMP pode me orientar?
    • By tony_lu
      Boa tarde pessoal, gostaria de uma informação sobre páginas em AMP, vi que este formato ajuda no SEO de um site, porem não tenho ideia de como fazer, seria uma outra versão de um site para celular?  E a versão responsiva seria desconsiderada quando apontar essa versão AMP para o google? Queria entender melhor sobre isso,  alguem que ja trabalhe com AMP pode me orientar?
       
      Obrigado!
×

Important Information

Ao usar o fórum, você concorda com nossos Terms of Use.