CSS - メールテンプレートのメディアクエリが機能しない

Question

モバイル用に応答する必要のあるメールテンプレートを作成しています。私が午前問題は639px

上記解像度のデスクトップ上で見たとき.mobileHide要素が隠されている

<td style="padding:0 0 0 50px;margin: 0;vertical-align: top;" class="mobileHide"> 
    <div style="font-family: Calibri,Arial,sans-serif;font-size:64px;font-weight:bold;color:#fec326;margin:0;">1</div> 
</td> 

：

@media only screen and (max-width: 639px){ 
    .mobileHide{display:none !important;} 
} 

そして、私のhtml：ここ

は私のメディアクエリです

デスクトップに表示され、モバイルに表示されないようにする必要があります。

これに関するアイデアや助けをいただければ幸いです。 :)

Answer 1

あなたはそう、あなたのスタイリングを逆にする必要があります。

.mobileHide { 
    display: none; 
} 

@media only screen and (max-width: 639px){ 
    .mobileHide { 
     display:block !important; 
    } 
} 

(max-width: 639px)は、ページが適用されるためにこのスタイルにすることができ、最大幅は、この場合には、639pxあるので、あなたはこれをしたいと言っていますdisplay: blockになります。今度は639px未満では、より一般的なルールを定義することができます。display:noneとなります。>639px