感慨

已经是2020了，手机查看HTML邮件的体验怎么还那么差？

在国内，说到邮箱推送，那你一定绕不开QQ邮箱。
即使有其他邮箱，相信大部分人也会再做一个QQ邮箱转发，没办法，目前提醒最及时，使用体验最好的反倒是“微信”客户端。
单单一个实时推送，好多邮箱客户端都做不到。
现在很少有人使用电脑查看邮件了吧？如果您基本不用手机查看邮件的话，那下边的就不用看了。

发现问题

众所周知，WordPress 的默认邮件界面真的是什么样式都没有，简直朴素到令人发指。
只能自己做美化，可你一旦有这个想法，接下来就会遇到一个大坑。
QQ邮箱客户端默认是完全过滤 <style> 标签的，并且不支持 @media 属性。

解决问题

到这里之前的经验就完全无用武之地了，我们通常的思路都是先做PC端，然后通过 @media 来适配移动端。
很长一段时间，我都在百度查找解决办法，希望通过邮箱专属标记属性来适配QQ邮箱。可始终没能解决。
最近突发奇想，为什么不能先做移动端的页面，然后通过 @media 和 <style> 标签来适配PC端呢？说做就做。

实现思路

由于QQ邮箱不支持 <style> 和 @media 的特性，我们优先考虑移动端，然后把需要在PC端显示的元素加一个 display: none
然后通过下边的代码来让他在PC端正常的显示。同理，很多属性也都可以用这个方法正确适配移动端和PC端了。

<style> 
    @media (min-width: 576px){.***{display: block!important;}} 
</style>

图例

PC端

移动端（左边为正常适配，右边的为错误适配）

总结

之所以这样另辟蹊径，完全是自己懂的太少，没办法正常的适配QQ邮箱客户端，只能反其道而行。
但俗话说的好，黑猫白猫，能抓住老鼠的才是好猫。只要能把问题解决，都是好办法。