Here's the following test code:

<html>

  <head>
    <style>
      .text {
        /*Outlook can work with <style> in the <head>*/
        display: none;
      }

      @media only screen and (max-width: 200px) {
        .text {
          color: #FF0000 !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 250px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 300px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 350px) {
        .text {
          color: #FFFF00 !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 400px) {
        .text {
          color: #FF00FF !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 450px) {
        .text {
          color: #00FFFF !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 500px) {
        .text {
          color: #800000 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 550px) {
        .text {
          color: #008000 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 600px) {
        .text {
          color: #000080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 650px) {
        .text {
          color: #808000 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 700px) {
        .text {
          color: #800080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 750px) {
        .text {
          color: #008080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 800px) {
        .text {
          color: #808080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 850px) {
        .text {
          color: #FF8000 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 900px) {
        .text {
          color: #FF0080 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 950px) {
        .text {
          color: #00FF80 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1000px) {
        .text {
          color: #FF8080 !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 1050px) {
        .text {
          color: #80FF80 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1100px) {
        .text {
          color: #8080FF !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1150px) {
        .text {
          color: #FFFF80 !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 1200px) {
        .text {
          color: #FF80FF !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1250px) {
        .text {
          color: #FFFF80 !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1300px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1350px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 1400px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #0000FF !important;
        }
      }

      @media only screen and (max-width: 1450px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #FFFF00 !important;
        }
      }

      @media only screen and (max-width: 1500px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 1550px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #00FFFF !important;
        }
      }

      @media only screen and (max-width: 1600px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1650px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 1700px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #0000FF !important;
        }
      }

      @media only screen and (max-width: 1750px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FFFF00 !important;
        }
      }

      @media only screen and (max-width: 1800px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 1850px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #00FFFF !important;
        }
      }

      @media only screen and (max-width: 1900px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1950px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 2000px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #0000FF !important;
        }
      }

      @media only screen and (max-width: 2050px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FFFF00 !important;
        }
      }

      @media only screen and (max-width: 2100px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 2150px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #00FFFF !important;
        }
      }

      @media only screen and (max-width: 2200px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }
    </style>
  </head>

  <body>
    <style>
      .text {
        /*Outlook can work with <style> in the <head>*/
        display: none;
      }

      @media only screen and (max-width: 200px) {
        .text {
          color: #FF0000 !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 250px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 300px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 350px) {
        .text {
          color: #FFFF00 !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 400px) {
        .text {
          color: #FF00FF !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 450px) {
        .text {
          color: #00FFFF !important;
          display: block !important;
          background-color: #FFFFFF;
        }
      }

      @media only screen and (max-width: 500px) {
        .text {
          color: #800000 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 550px) {
        .text {
          color: #008000 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 600px) {
        .text {
          color: #000080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 650px) {
        .text {
          color: #808000 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 700px) {
        .text {
          color: #800080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 750px) {
        .text {
          color: #008080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 800px) {
        .text {
          color: #808080 !important;
          display: block !important;
          background-color: #808080 !important;
        }
      }

      @media only screen and (max-width: 850px) {
        .text {
          color: #FF8000 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 900px) {
        .text {
          color: #FF0080 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 950px) {
        .text {
          color: #00FF80 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1000px) {
        .text {
          color: #FF8080 !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 1050px) {
        .text {
          color: #80FF80 !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1100px) {
        .text {
          color: #8080FF !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1150px) {
        .text {
          color: #FFFF80 !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 1200px) {
        .text {
          color: #FF80FF !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }

      @media only screen and (max-width: 1250px) {
        .text {
          color: #FFFF80 !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1300px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1350px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 1400px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #0000FF !important;
        }
      }

      @media only screen and (max-width: 1450px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #FFFF00 !important;
        }
      }

      @media only screen and (max-width: 1500px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 1550px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #00FFFF !important;
        }
      }

      @media only screen and (max-width: 1600px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1650px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 1700px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #0000FF !important;
        }
      }

      @media only screen and (max-width: 1750px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FFFF00 !important;
        }
      }

      @media only screen and (max-width: 1800px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 1850px) {
        .text {
          color: #0000FF !important;
          display: block !important;
          background-color: #00FFFF !important;
        }
      }

      @media only screen and (max-width: 1900px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FF0000 !important;
        }
      }

      @media only screen and (max-width: 1950px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #00FF00 !important;
        }
      }

      @media only screen and (max-width: 2000px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #0000FF !important;
        }
      }

      @media only screen and (max-width: 2050px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FFFF00 !important;
        }
      }

      @media only screen and (max-width: 2100px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #FF00FF !important;
        }
      }

      @media only screen and (max-width: 2150px) {
        .text {
          color: #00FF00 !important;
          display: block !important;
          background-color: #00FFFF !important;
        }
      }

      @media only screen and (max-width: 2200px) {
        .text {
          color: #FFFFFF !important;
          display: block !important;
          background-color: #000000 !important;
        }
      }
    </style>
    <table>
      <tr>
        <td class="text">
          <!-- That's 2200px and up for the maximum width of the viewport! -->
          Goodbye world. This is just too large to find what max-width really is.
        </td>
      </tr>
    </table>
  </body>

</html>

And here's the screenshot result taken on LG K7, a test device:

I'm leaning towards the latter, but wasn't it known that Gmail strips away the < head> tag in an HTML email?