如何使电子邮件模板同时适用于移动设备和桌面设备？答案

【问题标题】：How to make an email template responsive for both Mobile and Desktop?如何使电子邮件模板同时适用于移动设备和桌面设备？
【发布时间】：2014-12-29 09:15:52
【问题描述】：

在我的例子中，我使用Roadie gem 为自动电子邮件自定义 CSS 和 HTML。但是，问题是样式在普通台式机/笔记本电脑电子邮件客户端上看起来很棒，但在移动电子邮件客户端上看起来很糟糕。

似乎没有任何响应式方法来处理移动电子邮件设计。关于如何使电子邮件在移动设备和台式机/笔记本电脑设备上看起来相同的任何想法？

这是电子邮件模板代码：

<!DOCTYPE html>
<html lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=UTF-8">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="">
<meta name="author" content="">
<title><%= Saas::Config.app_name %></title>
<link href="http://fonts.googleapis.com/css?family=Oswald:400,300,700" rel="stylesheet" type="text/css">
<link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,700' rel='stylesheet' type='text/css'>
<style type="text/css">
  body{font-family: 'Source Sans Pro', sans-serif;background: #eeeeee;}
  .container{width: 570px;margin: auto;padding: 40px 0;}
  .main {padding: 70px 100px;font-weight: 300;background: #fff;}
  .header{background: #cc0000;padding: 10px 0 5px 25px;min-height: 40px;}
  .logo{float: left;}
  .credo{color: white;font-style: italic;font-size: 16px;margin-left: 230px;margin-top: 10px;}
  .footer {background: #7e7e7e;text-align: center;color: #fff;font-weight: 100;padding: 15px 0;}
  .h8{font-size: 28px; font-weight: 300;}
  .red, .red a{color: #d93f3f;text-decoration: none;}
  div.text{font-size: 20px;color:#616161;margin-bottom: 5px;}
  .justify{text-align: justify;}
  .blue, .blue a{color: #3fb2ff;}
  .get_started{background: #66ccff;color: #fff;text-decoration: none;padding: 10px 30px;font-weight: 400;font-size: 22px;}
</style>
</head>
<body>
  <div class="container">
    <div class="header">
      <%= image_tag 'logo.png', class: 'logo' %>
      <div class="credo">Credo here</div>
    </div>
    <div class="main"><%= yield %></div>
    <div class="footer">
      <span>&copy;2014 AppName Inc, 27001 Address</span>
    </div>
  </div>
</body>
</html>

基本上，我希望电子邮件在两种媒体（浏览器和移动设备）上的外观尽可能接近。

【问题讨论】：

mailchimp.com/resources/research/email-on-mobile-devices/html

标签： html css ruby-on-rails email responsive-design

【解决方案1】：

这样的事情应该可以工作http://jsfiddle.net/3y49x8vs/

基本上你应该改变 .container width: 570px;到这个

.container {
    width: 100%;
    max-width: 570px;
    margin: auto;
    padding: 40px 0;
}

【讨论】：

感谢@BojanPetkovski，但问题在于，当您最小化窗口时，文本会在中心被挤压。我们怎样才能防止这种情况发生？当然它必须在一定程度上缩短，但文本的每一侧仍有空间以增加宽度。