gpt4 book ai didi

html - 如何忽略 roadie gem 中覆盖桌面样式的媒体查询样式?

转载 作者:行者123 更新时间:2023-11-28 17:29:23 25 4
gpt4 key购买 nike

我正在使用 roadie gem 为我的应用程序设计一个邮件模板。从我的应用程序发送邮件时,我发现我的桌面样式被媒体查询样式覆盖了。确切地说,我想在桌面上以表格 View 的形式显示一些内容,在手持设备中以普通段落 View 的形式显示一些内容。在桌面上,它显示为段落而不是表格 View 。这是因为 roadie gem 将所有样式设置为内联样式,因此我的媒体查询覆盖了桌面样式。有人帮我解决了这个问题。

邮件程序.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

移动.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;
}
}

桌面.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>

发送邮件.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>

最佳答案

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

  • 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 将忽略移动样式,它不会删除它们,也不会内联它们。它将仅内联适用于大多数客户端的桌面样式。每当在对媒体查询感兴趣的客户端中打开电子邮件时,移动样式将在那里并生效。

关于html - 如何忽略 roadie gem 中覆盖桌面样式的媒体查询样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/26466207/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com