如何在Gmail中编写无需@media查询的响应式HTML邮件？

我正在编写第一份HTML邮件，桌面端显示正常，但在移动端查看时需要做一些细微调整。我知道Gmail不识别<style>标签，必须使用内联CSS，但不清楚如何不借助@media screen and (max-width)来适配不同屏幕尺寸。附上当前代码及显示效果截图，恳请提供帮助。

预期显示效果 #

移动端实际显示效果 #

当前代码 #

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!--Quite a few clients strip your Doctype out, and some even apply their own. Many clients do honor your doctype and it can make things much easier if you can validate constantly against a Doctype.-->
<html>
    <head></head>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="format detection" content="telephone=no">
<meta name="viewport" content="width=device-width, initial-scale=1.0; maximum-scale=1.0; user-scalable=no;">
<meta http-equiv="X-UA-Compatible" content="IE=9; IE=8; IE=7; IE=Edge" />
<title>Email template for USA Label Express</title>

<!-- Please use an inliner tool to convert all CSS to inline as inpage or external CSS is removed by email clients -->
<!-- important in CSS is used to prevent the styles of currently inline CSS from overriding the ones mentioned in media queries when corresponding screen sizes are encountered -->

<style type="text/css">
    
    /* some resets and issue fixes */
        #outlook a { padding:0; }
        body{ width:100% !important; -webkit-text; size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0; }     
        .ReadMsgBody { width: 100%; }
        .ExternalClass {width:100%;} 
    .backgroundTable {margin:0 auto; padding: 0; width:100%; !important;}
    table td {border-collapse: collapse;}
    .ExternalClass * {line-height: 115%}
    
    /* End Reset */
    
    /* use to fix table positioning
    td{
        border:thin #000000 solid;
        
    }
    */
    
    /*Display block allows us to stack elements */
    
    *[class="mobile-column"] {display:block;}
    
    /*Some more stacking elements */
    
    *[class="mob-column"] {float: none !important; width: 100% !important;}
    
    /* hide stuff */
    *[class="hide"] {display: none !important;}
    
    /*This sets elements to 100% width and fixes the height issues */
    
    *[class="100p"] {width100% !important; height: auto !important;}
    
    /*for the 2x2 stack */
    
    *[class="condensed"] {padding-bottom: 40px !important; display block;}
    
    /*Centers content on mobile */
    
    *[class="center"] {text-align: center !important; width: 100% !important; height: auto !important;}
/*100percent width section with 20px padding */
    *[class="100pad"] {width: 100% !important; padding: 20px;}
    /*same as above with 20px padding left and right */
    *[class="100padleftright"] {width: 100% !important; padding: 0 20px 0 20px;}
    /*again but top and bottom */
    *[class="100padtopbottom"] {width: 100% !important; padding: 20px 0px 20px 0px;}
body {
    margin: 0;
}
body, table, td, p, a, li, blockquote {
    -webkit-text-size-adjust: none!important;
    font-family: Arial, "Helvetica Neue", Helvetica, "sans-serif";
    font-style: normal;
    font-weight: bold;
    color: #001588;
    font-size: 11px;
}
    
    table{
        border-spacing: 0px;
    }
    
    
    
    a {
        text-decoration: none;
    }
    
    #email{
        background-image: url("https://mcusercontent.com/e826d556957bbe51fc416e609/images/c7552f30-ebb5-ff4f-16aa-ab8921f6145e.jpg");
        background-repeat:no-repeat;
        background-color: #DBDCEF;
        background-size: cover;
        
    }
    
@media only screen and (max-device-width: 480px) {
    /* Here you can include rules for the Android and iPhone 
    native email clients. 
    
    Device viewport dimensions are as follows
    Iphone - 320px X 480px - portrait, 480px X 320px - landscape
    Android - 350px X 480px - portrait, 480px X 350px - landscape
    (These are average dimensions, the Android OS runs on several different devices)
    */
    
    .address{
        
        font-size: 7px !important;
    }
    
    }
    
    
    </style>
    </head>
    
    <body>
<div id="email" style="width:600px; height: 220px; margin-left:auto; margin-right:auto; ">

<!-- Top Text --> 
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
    <td> <a href="http://www.usalabelexpress.com/LabelInformation.php?Capabilities-5"> <img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/bf2c9f86-218b-ec7f-c0ad-50543875f454.png
" alt="custom label printing, flexographic, digital, promotional products, small or large run capabilities, in house art dept" style="padding: 5px;" class="topText responsiveImage"></a> 
    </td>
</tr>
</table>

<!-- Body --> 
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr style="border-spacing: 0px;">
    <td width="13%"> 
        <a href="https://www.usalabelexpress.com"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/53bab0ac-c3a4-1dcd-a8ff-31d20cf90e92.png"  alt="" height="" width="" style="padding-left: 15px;" class="eagle responsiveImage"></a> 
    </td> 
    <td width="53%"> 
        <a href="https://www.usalabelexpress.com"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/52310cc7-b1d1-4dca-63d9-c2718d4e3ac0.png"  alt="" height="" width="" class="logo responsiveImage" ></a> 
    </td>
    <td width="34%" style="text-align: right; padding-right: 10px;">
            
        <a href="https://usalabelexpress.com/Staff.php?Jim-Seldenright-9" style=" padding-left:60%; padding-top: 10%;"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/45f224f6-a3cb-2c49-1c92-0a25eedea4e7.jpg" alt="Jim Seldenright Salesman" height="" width="60px" class="repImage responsiveImage" style="border:1px solid #001588;">Jim Seldenright <br /> Sales Representative </a> 

    </td>
</tr>
<tr> 
    <td></td>
    <td style="text-align: center;">
        <div>
            <a href="https://www.facebook.com/usalabelexpress/"><img src="https://mcusercontent.com/e826d556957bbe51fc416e609/images/3d812f2a-b601-fbe3-97f7-03797e843efa.png"  alt="Facebook Icon" height="" width="8%" style="display: inline-block;" class="facebook responsiveImage"></a>
            <span><a href="https://www.usalabelexpress.com">www.usalabelexpress.com</a></span>
        </div>
    </td>
    <td style="text-align: right; padding-right: 10px; text-decoration:none;"> Cell: 330-432-6876 <br /> Email: jim@usalabelexpress.com </td>
</tr>
</table>

<!-- Bottom Text -->
<table role="presentation" border="0" cellspacing="0" width="100%">
<tr>
    <td colspan="2" style="text-align:center;"><a href="https://www.google.com/maps/place/11206+Industrial+Pkwy+NW,+Bolivar,+OH+44612" style="text-decoration: none; font-family: Arial, Gotham, 'Helvetica Neue', Helvetica, 'sans-serif'; color: #001588; font-size: 10px; font-weight: bold;" class="address"> P.O. Box 518 ★ 11206 Industrial Parkway Bolivar, Ohio  44612 </a> &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; Office: 330-874-1001 ★ Fax: 330-874-9796 </td>
</tr>
</table> 
</div>
</body>
</html>

内容的提问来源于stack exchange，提问作者K8K