如何忽略重寫roadie gem中的桌面風格的媒體查詢風格？

我正在爲使用roadie gem的應用程序設計一個郵件模板。從我的應用程序發送郵件時，我發現我的桌面樣式被媒體查詢樣式覆蓋。確切地說，我想在桌面和正常的段落視圖中顯示一些內容作爲桌面視圖。在桌面上，它顯示我爲段落而不是表格視圖。這是因爲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><%[email protected] %></td> 
     </tr> 
    <% end %> 
</table>

來源

2014-10-20 UI Developer

你能解決這個問題嗎？ @Sami – levelone 2015-10-22 02:09:31

你必須有點不同指定媒體查詢樣式，以便它們不會被桌面回升。

而是寫作：.myclass，你會寫：

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

和#myID將成爲：

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

第一*確保你選擇與該類名稱的任何元素。

第二個*確保您可以將多於一個的類應用於某個元素，並且它仍然會被拾取。 *=表示containing。沒有*它只是意味着equal to。

來源

2014-10-24 17:24:45 DoubleA

你應該知道兩件事情搞清楚這個問題時：

視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會忽略移動的風格，它不會刪除，也沒有內聯他們。它將內聯僅適用於大多數客戶端的桌面樣式。只要在對媒體查詢感興趣的客戶端中打開電子郵件，移動樣式就會在那裏並生效。

來源

2015-10-23 23:17:16 Kazmin

我被這個問題困擾了一段時間。這個答案明確地解決了我的問題。謝謝！ – ifyouseewendy 2017-07-18 22:46:46

如何忽略重寫roadie gem中的桌面風格的媒體查詢風格？

回答

相關問題