html - 在移动设备上隐藏某些电子邮件元素

标签 html css email mobile mailchimp

我正在发送一封电子邮件,其中有一个巧妙的视觉元素,依赖于能够突出显示文本。由于这在移动设备上实际上是不可能的,并且如果没有这种视觉效果,它看起来真的很尴尬,因此我正在考虑尝试不在移动设备上显示此元素。

据我所知,执行此操作的唯一方法是使用 @media 标记,据我所知,这无法在内联电子邮件友好中完成css方式。这可以通过其他方式实现吗?

如果相关的话,我正在使用 MailChimp,但我不确定是否会如此。

最佳答案

媒体查询肯定会通过 MailChimp 内联工作。基本上,您只需为要隐藏的元素分配一个类,例如“仅限桌面”,然后当浏览器宽度低于某个像素时,将 CSS 规则应用于该选择器 display:none宽度。

@media only screen and (max-device-width: 480px) {
  .desktop-only {
     display:none;
  }
}

https://blog.mailchimp.com/using-media-queries-to-improve-readability/

关于html - 在移动设备上隐藏某些电子邮件元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23229477/

相关文章:

android - 从 HTML 电子邮件中删除默认的 Android 填充

html - 有没有办法让 CSS 选择器在标题前放置 "-"?

javascript - 如何检测默认下拉选项与使用 js/jquery 选择的选项?

html - 导航下拉菜单边框问题

CSS 行高动画

javascript - React 中的 onMouseover 和 onMouseOut 事件句柄

javascript - JS 未在本地主机中加载

jquery - 更改 jquery ui 对话框 z-index

php - 电子邮件验证链接被反网络钓鱼软件点击

java - 获取已读回执