Change font-size with media queries

I want to change the font size of a table header.
It should be large when the application is view at the desktop and become smaller when shown on a mobile phone.

th {
  @media screen and (max-width: 699px) {
    font-size: xx-large;

  }  
  @media screen and (max-width: 700px) {
    font-size: small;

  }  
  
}

I am not quite sure if this is the right way.

>Solution :

You have to write this way

th {
    font-size: xx-large;
}

@media screen and (max-width: 699px) {
   // write any CSS code here.

  th {
    font-size: xx-large;
   }
}