Como faço para que o meu texto aumente ou diminua juntamente com a dimensão da tela? Li um pouco sobre rem
, mas não entendi muito bem.
Na verdade nem sei se isso se aplica ao caso.
5 Respostas
Automaticamente com tamanho de tela
Acesse essa documentação do MDN sobre CSS media queries. Como não detalhou exatamente os pontos de corte, fica complicado dar um exemplo prático e genérico demais. Porém o link acima explica muito bem como fazer isso.
Para permitir que aumente com zoom do scroll (acessibilidade)
Em poucas palavras, um modo de fazer isso é definir um tamanho base do body
apenas uma vez em px
(por exemplo, 16px
), e a partir daí, toda e qualquer alteração de fonte ou então de tamanho de tela, até mesmo as larguras e alturas de elementos, deveriam ser definidas em em
.
Isso também é uma questão de acessibilidade. Usar fontes fixas, em especial em navegadores mais antigos, impedia que a pessoa usasse o aumentar natural do navegador.
O bom de definir em em
ou outra unidade que seja relativa e não fixa, é que ao aumentar o zoom da página ela reage como se o tamanho da tela ficasse com largura menor pelo ponto de vista responsívo. Uma pessoa em um computador com uma tela Full HD que aumentar o zoom muito irá ver o site como se estivesse acessando de um celular, o que é bem interessante se comparado a simplesmente só aumentar a fonte e os blocos de caixas com tamanho fixo não aumentarem e ficar uma bagunça.
Reparem que alguns navegadores modernos podem até permitir um efeito parecido ao aumentar o zoom mesmo que as unidades usadas não sejam em em
ou outra unidade relativa, mas em algumas versões mais antigas isso não funciona.
-
Opa, legal sua resposta, mas já ia comentar que nos navegadores modernos já funciona o zoom mesmo usando pixels pras unidades. Entretanto, fica muito mais fácil ajustar as fontes via media queries utlizando REM e colocando uma base pro elemento html.– marciopCommented 13/08/2014 às 19:19
Tenho duas opções.
1) Você pode usar um plugin para fazer isso, aqui tem um:
2) Você pode fazer isso com media queries, onde você consegue definir em qual largura vai haver modificação, por exemplo:
/* Smaller than standard 960 (devices and browsers) */
@media only screen and (max-width: 959px) {
p{
font-size: 10px;
}
}
/* Tablet Portrait size to standard 960 (devices and browsers) */
@media only screen and (min-width: 768px) and (max-width: 959px) {
p{
font-size: 12px;
}
}
/* All Mobile Sizes (devices and browser) */
@media only screen and (max-width: 767px) {
p{
font-size: 14px;
}
}
/* Mobile Landscape Size to Tablet Portrait (devices and browsers) */
@media only screen and (min-width: 480px) and (max-width: 767px) {
p{
font-size: 9px;
}
}
/* Mobile Portrait Size to Mobile Landscape Size (devices and browsers) */
@media only screen and (max-width: 479px) {
p{
font-size: 7px;
}
}
Basta utilizar CSS que este já resolve desta maneira:
@media only screen and (min-width : 1550px)
{ css para este tamanho }
@media only screen and (min-width : 1400px) and (max-width : 1549px)
{ css para este tamanho}
-
Só no Window Resizer temos 10 dimensões diferentes para diferentes dispositivos. Torna-se custoso fazer diferentes estilos para essa variedade de dimensões. A ideia é fazer uma página adaptativa até certo ponto, no qual fique ruim de visualizar. Commented 11/02/2014 às 16:30
-
escolha as telas que quer atender, pois com media queries é o jeito mais concreto que conheço, independente de navegador Commented 11/02/2014 às 16:41
Utilize font-size: 62.5% no .body depois basta usar o seguinte, para uma fonte de 16px, use 1.6em, para 24px, 2.4em, etc...
-
Isto não fornece uma resposta à pergunta o autor pediu uma explicação dos casos de uso das unidades CSS. Você fez uma mera citação que ficaria melhor como um comentário abaixo da publicação dele. Commented 30/01/2020 às 7:14
Você pode usar a função clamp()
do css.
p {
font-size: clamp(1em, 1em + 1vw, 1.5em);
}
Na prática, o que está acontecendo é: o tamanho da fonte especificado é 1em + 1vw, mas ele nunca será menor que 1em, nem maior que 1.5em.
Aqui, você encontra um ótimo tutorial sobre o assunto: https://desenvolvimentoparaweb.com/css/textos-responsivos-com-css-clamp/
-
1Prefira o link da documentação oficial a tutoriais. Também explique que usar
clamp()
para tamanhos de fonte, permite definir um tamanho de fonte que varia com o tamanho da janela de visualização. E adicione um Exemplo Mínimo, Completo e Verificável mostrando com funciona o seu argumento na prática. Faça o nosso tour. Commented 18/10/2021 às 14:17 -
2Olá Alan. É uma boa resposta e complementando o que o o @AugustoVasques, recomendo editar a resposta e melhorar ela dando um foco mais técnico, de preferência seguindo a documentação: developer.mozilla.org/en-US/docs/Web/CSS/clamp() (já citada), w3.org/TR/css-values-4/#math e aproveitar para mencionar os navegadores com suporte e limitações existentes, um bom lugar para pesquisar: caniuse.com/?search=clamp()– Syzoth ♦Commented 18/10/2021 às 14:21
CSS media queries
. Se for conforme o nível de zoom (caso comum aonderem
eem
se aplicam) olhe minha segunda opção. Ela é complicada mas é excelente para layouts e textos flexíveis sem quebrar o layout.