How to control the size of a font using @media

Question

I’m trying to change the size of a font when decreasing or increasing my screen size using @media

I know this is how it works:

#Fonte{font-size:10vw;}

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

But that command only deals with height.

How can I treat the height and width ?

Can be done in the same @media ?

I was thinking of something like if the screen height is changed or the screen width is changed:

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

Answer 1

It was on the lock spoke a and at your watering

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

Just reinforcing that for this rule to be valid the two things has to be true, so to apply this CSS in the source the screen has to be at most 880px high and at the same time has to be at most 1279px wide

EDIT

Lists separated by commas behave like the operator or when used in media queries. When we use media queries with a comma-separated list, if any media wants to return true, styles or style sheets will be applied. Each media query in a comma-separated list is treated as an individual query, and any operator applies in a media query does not affect others. This means media queries separated by commas can have different media goals.

Just one example:

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

Source: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/CSS_Media_queries#Listas_separadas_por_v%C3%ADrgula