Question

我正在构建一个HTML电子邮件，并希望使用@media查询为移动设备显示一个横幅，为桌面/网络邮件屏幕显示另一个横幅。我知道大多数电子邮件客户端都会删除标记中的css。有没有办法把CSS内联？这是当前代码的一个例子..

<style type="text/css">

  @media (max-width: 1000px){
    /* rules defined inside here are only applied to browsers that support CSS media queries and the browser window is 480px or smaller */
    img#standardBanner{display:none !important}
    img#mobileBanner{display:block !important} 
  }

</style>

还有其他方法可以做到这一点吗？我没有太多运气。

谢谢！

Answer 1

要回答你的问题，对于一个纯粹的CSS解决方案，答案就是不可能。

您可以从服务器提供图像并使用PHP等脚本语言来获取用户的设备信息，然后使用PHP函数头提供相应的图像。

Answer 2

<style type="text/css">

    img#standardBanner{display:block !important}
    img#mobileBanner{display:none !important} 

    @media (max-width: 1000px){

    img#standardBanner{display:none !important}
    img#mobileBanner{display:block !important} 
  }

</style>

@media查询使用内联在电子邮件中使用？

2 个答案: