@media max-width

yellow -> lime (1000) -> red (800) -> DodgerBlue (600)
pink -> orange (1000)
tan -> #CFC (800)
cyan-> fuchsia (600)
   <style>

   div.ex {background-color: yellow;}

   div.z1 {background: pink;}
   div.z2 {background: tan;}
   div.z3 {background: cyan;}

   /* Meaning of max-width: */

   /* Viewport width equal to or smaller than max-width ==> TRUE */
   /* Viewport width larger              than max-width ==> FALSE */

   /* When a test is true, insert its specified rules in place of the test */
   /* The order of the three @media tests matters */
   /* With this ordering of @media tests, when one is true, all earlier tests are true */

   @media screen and (max-width: 1000px) {
     div.ex {background: lime;}
     div.z1 {background: orange;}
   }

   @media screen and (max-width: 800px) {
     div.ex {background: red;}
     div.z2 {background: #CFC;}
   }

   @media screen and (max-width: 600px) {
     div.ex {background: DodgerBlue;}
     div.z3 {background: fuchsia;}
   }

   </style>
   </head>
   <body>

   <h1>@media max-width</h1>

   <div class="ex">yellow -> lime (1000) -> red (800) -> DodgerBlue (600)</div>
   <br />
   <div class="z1">pink -> orange (1000)</div>
   <div class="z2">tan -> #CFC (800)</div>
   <div class="z3">cyan-> fuchsia (600)</div>