Question

我正在使用roadie gem为我的应用程序设计邮件模板。从我的应用程序发送邮件时，我得知我的桌面样式被媒体查询样式覆盖。确切地说，我希望将一些内容显示为桌面视图中的表视图和手持设备中的正常段落视图。在桌面上它显示为段而不是表视图。这是因为roadie gem将所有样式都设置为内联，因此我的媒体查询会覆盖桌面样式。有些人帮我解决了这个问题。

mailer.rb

class My_mailer < ActionMailer::Base
 layout 'email_design'
 include Roadie::Rails::Automatic

 def send_mail(user,product, count)
     @product = product
     @no.of.items = count
     mail(to: user.email, subject:'you are the new user')
 end

mobile.css

@media only screen and (max-width: 480px){
   .list{
    width: 100% ;
    border: none;
}
.list td{
    width: 100%;
    display: block;
    border: none;
}
.list th{
    display: none;
}
.hide-show{
    display: inline;
}
}

desktop.css

.list{
width: 90%;
border-collapse: collapse;
border: 1px solid #BFBFBF;
}
.list td{
border-collapse: collapse;
border: 1px solid #BFBFBF;
}
.list th {
border-collapse: collapse;
border: 1px solid #BFBFBF;
}
 .hide-show{
display: none;
}

email_design.html.erb

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"       "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="/assets/email_layout/desktop.css" />
<link rel="stylesheet" type="text/css" href="/assets/email_layout/mobile.css" data-immutable />
 </head>

send_mail.html.erb

<table class="list">
  <tr>
    <th>Product</th>
    <th>no.of.item</th>
  </tr>
  <% .each do |product| %>
      <tr>
        <td class="m-bold" style="padding: 10px"><%= product.full_name %></td>
        <td style="padding: 10px"><span class="hide-show">No.of.items:</span><%=@no.of.items %></td>
      </tr>
  <% end %>
</table>

Answer 1

在弄清楚这个问题时你应该知道两件事：

roadie将删除您的头部样式并将其置于内联
大多数客户端（they work mostly on mobile mail apps）都会忽略媒体查询。无论屏幕有多大，浏览器中的Gmail都无法扩展您的电子邮件。

要获得所需的行为，您应该将data-roadie-ignore放在移动样式的样式标记中，如下所示：

<link rel="stylesheet" type="text/css" href="/mobile.css" data-roadie-ignore />

这样做，roadie将忽略移动样式，它不会删除它们，也不会内联它们。它将仅列出适用于大多数客户端的桌面样式。每当在对媒体查询感兴趣的客户端中打开电子邮件时，移动样式将在那里生效。

Answer 2

您必须稍微区别地指定媒体查询样式，以便桌面不会选择它们。

而不是写：.myclass，你必须写：

*[class*="myclass"] { /*rules go here*/ }

和#myID将成为：

*[id*="myID"] { /*rules go here*/ }

第一个*确保您选择具有该类名的任何元素。

第二个*确保您能够将超过1个类应用于元素，并且它仍然会被拾取。 *=表示containing。如果没有*，则仅表示equal to。

如何忽略覆盖路易宝石桌面风格的媒体查询风格？

2 个答案: