与手机兼容的 Html 电子邮件模板

标签 html css media-queries newsletter

我正在编写 html 电子邮件,它应该对手机和显示器有效,我知道如何编写电子邮件模板,并且我已经为显示器完美地编码了它,现在移动兼容性出现了问题code> .. 见附件图片 左边一个用于显示器 是完美的,但对于手机来说它都坏了,我确实看到了 media queries 但真的不知道如何使用它们,有人可以吗帮我一下

if i have a td and when viewed on computers its two column layout but for mobiles it should show one coluomn in a row as in image and also how to adjust one image to full screen ..as i want yellow images to be in full screen and heading right under in full screen width

enter image description here

最佳答案

确保您插入了视口(viewport)元标记:

<meta name="viewport" content="width=device-width, initial scale=1.0"/>

之后,您可以在 CSS 中插入媒体查询:

@media only screen and (max-width: 600px) {
  ...
}

您可以在此处找到有关响应式 html 电子邮件的更多信息:http://www.webdesignerdepot.com/2013/06/responsive-html-email-design/

关于与手机兼容的 Html 电子邮件模板,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/18155166/

相关文章:

css - Bootstrap 容器类不占用全宽移动设备

javascript - 从 MatchMedia JS 函数中执行 Twig 语句?

css - 媒体查询不适用于 iPhone 4/4S

html - 移动站点使用 'Mega CSS Sprites' 有什么缺点?

javascript - Chrome 扩展 - 更改弹出窗口

css - 边距自动在简单的 html/css 代码中不起作用

html - 如何修改 CSS 复选框标签以包含 'required' 函数

css - 实现溢出: hidden without hiding scroll bars的效果

javascript - 使用 JavaScript 更改大量样式

css - Bootstrap 列之间的均匀空间