2

Estou tentando mudar o tamanho de uma font quando diminuir ou aumentar o tamanho da minha tela usando @media

Sei que da seguinte forma funciona:

#Fonte{font-size:10vw;}

@media (max-height:880px){
  #Fonte{
     font-size: 10vh !important;
  }
}

Porém esse comando só trata a altura.

Como posso fazer para tratar a altura e largura ?

É possível fazer no mesmo @ media ?

Estava pensando em algo do tipo se a altura da tela for alterada ou se a largura da tela for alterada:

@media (max-height:880px, max-width:1279px){
      #Fonte{
         font-size: 10vh !important;
      }
    }

1 Resposta 1

2

Foi na trava falou um and na sua rega

@media (max-height:880px) and (max-width:1279px){
  #Fonte{
     font-size: 10vh !important;
  }
}

Só reforçando que para essa regra valer as duas coisas tem que ser verdade, logo para aplicar esse CSS na fonte a tela tem que ter no máximo 880px de altura e ao mesmo tempo tem que tem no máximo 1279px de largura

EDIT

Listas separadas por vírgulas comportam-se como o operador or quando utilizadas em media queries. Quando utilizamos media queries com uma lista separada por vírgulas, se qualquer media queries retornar verdadeiro, os estilos ou folhas de estilos serão aplicadas. Cada media query em um lista separa por vírgulas é tratada como uma query individual, e qualquer operador aplica em uma media query não afeta os outros. Isto significa que media queries separadas por vírgulas podem ter objetivos diferentes de media features, types e states.

Apenas um exemplo:

@media screen and (max-width: 900px) and (min-width: 600px), (min-width: 1100px) { }

Fonte: https://developer.mozilla.org/pt-BR/docs/Web/Guide/CSS/CSS_Media_queries#Listas_separadas_por_v%C3%ADrgula

2
  • Entendido, mas estava procurando algo como se eu aumentar a altura da tela seria aplicado um vh na fonte e se eu aumentar a largura da tela ser aplicado um vw na fonte. Pelo que eu entendi um pouco vw altera a fonte em relação a largura e vh em relação a altura. nessa sua resposta, funcionaria caso eu trocasse a condição and por um or ? Commented 17/10/2019 às 16:07
  • 2
    @GabrielSilva sim VH é altura, e VW largura da tela, da viewport, não do container. Sua regra tem grandes chances de dar errado de qq forma pq é complicado usar medidas de fonte baseado no viewport. De qq forma deixei uma edição que pode te ajudar. E em último caso vc pode criar quantas regras @ media quiser para cada altura, largura, orientação etc....
    – hugocsl
    Commented 17/10/2019 às 16:16

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .