Try it Live

​x
 
<!DOCTYPE html>
<html>
  <head>
  <meta charset="UTF-8">
    <style>
     h2 { 
      padding:10px;
      border:2px solid brown;
     }
      /*476px X 476  Aspect Ratio for Accurate values*/
     @media (aspect-ratio: 1/1){ 
      h2 { 
       background-color:aqua;
       color:Green;
      }
     }
     /*Above 953px X 476  Minimum Aspect Ratio */
     @media (min-aspect-ratio: 2/1){
      h2 { 
       background-color:Gold;
       font-size:3em;
      }
     }
    /*Maximum Aspect Ratio */
     @media (max-aspect-ratio: 2/1){
      h2 { 
       background-color:lightgreen;
       font-size:1em;
      }
     }
    </style>
  </head>
  <body>
    <h2>CSS Aspect Ratio in Media Query </h2>
    <b><u>Resize your browser window to see the effect</u></b>
  </body>
</html
​