Question

我正在为我的应用设计电子邮件模板。

对于特定类型的内容，我需要将其显示为桌面中的表格和手持设备中的普通内容。从本地应用程序发送邮件时，我在桌面上获得了正常视图而不是表格。媒体查询是最重要的。

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;
}

mobile.css

.list{
    width: 100% !important;
    border: none !important;
}
.list td{
    width: 100% !important;
    display: block !important;
    border: none !important;
}
.list th{
    display: none !important;
}
.hide-show{
    display: inline !important;
}

email_template.html.erb

<table class="list">
  <tr>
    <th>product</th>
    <th> Number of items</th>
  </tr>
  <% product.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><%= product.count %></td>
      </tr>
  <% end %>

修改：使用@media更新：

mobile.css

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

Answer 1

尽可能避免使用!important。媒体查询中不需要!important，除非原始样式具有它，否则您需要使用它来覆盖原始版本。

首先向我们展示包含@media屏幕等的实际媒体查询。

尝试从css中删除所有!important并再次测试。

Answer 2

确保移动广告位于css页面的顶部，然后是平板电脑和桌面。这应该可以解决覆盖问题。希望这会有所帮助。

媒体查询覆盖桌面样式

2 个答案: