HTMLメールの注意点(Gmail)

システムで Gmail へ HTML メールを送る際の注意点になります。
Yahooなど他のサービスでの動作については確認していません。

例えばですが、PCではフォントサイズ 16px SP ではフォントサイズ 20px みたいな要件のとき

.font {
  font-size: 16px;
}

@media only screen and (max-width:480px) {
  .font {
    font-size: 20px !important;
  }
}

の様に書けば要件を満たせます。

ここで注意しなければいけない部分が2点あります。

1 media query の max-width: の後ろにスペースを入れてはいけない

@media only screen and (max-width: 480px) {

とするだけで、SP 時にフォントサイズが変わらないということが起きます。

2 !important を書かないと上書きされない

font-size: 20px !important;

css は後から書いたスタイルが優先されるはずなのですが、Gmail へ送る HTML メールでは !important を書かなければ上書きされないようでした。

参考

html - Why is Gmail ignoring my media queries? (On iOS) - Stack Overflow