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