引導3：電子郵件違約，甚至在屏幕上

我打電話引導3的樣式像這樣在我的電子郵件的標題打印介質類型：引導3：電子郵件違約，甚至在屏幕上

<link href="/assets/bootstrap.css" media="screen" rel="stylesheet" type="text/css" />

我注意到，在我的電子郵件中的鏈接顯示爲黑色，並且沒有並確定他們正在使用僅在引導程序3的@media打印部分中使用的css，特別是color: #000 !important;。

這是爲什麼？

如何指定我的電子郵件應該是屏幕媒體類型而不打印？（當然，除非有人決定將其打印出來）

（編輯：我應該指定，我使用了視Roadie寶石樣式轉換爲內聯的電子郵件：https://github.com/Mange/roadie）

來源

2014-03-24 DKhanal

您無法鏈接到外部HTML電子郵件樣式表。你需要把它包含在體內。即使是100％的兼容性，它也必須內聯，因爲Gmail會將<style>標籤全部剝離。

此外，bootstrap不是專爲電子郵件設計的，所以它不會在大多數電子郵件客戶端中一致地呈現。您需要使用表格。

如果您想要一個電子郵件框架，請嘗試Zurb的Ink。

雖然被認爲是「模式」，我還推薦Ted Goas的Cerberus或Brian Graves的Responsive Email Patterns。

來源

2014-03-24 19:10:47 John

謝謝，我應該指定我們正在使用將樣式錶轉換爲內聯的rails gem。我仍然不知道爲什麼它抓住了@media print []樣式。 – DKhanal

Bootstrap仍然使用專爲web設計的div。爲自己節省一個麻煩的世界，並與專爲電子郵件設計的東西一起使用。它也不應該抓住任何東西，因爲當你發送它時，它不會顯示在收件人電子郵件客戶端中。 – John

在Web和電子郵件設計之間快速閱讀[一些差異]（http://stackoverflow.com/questions/2229822/best-practices-considerations-when-writing-html-emails/21437734#21437734）。更好的是，你現在知道花費數小時後想知道爲什麼你的網頁佈局不能在電子郵件客戶端一貫工作。 – John

我想到了這一點，以防其他人有這個具體問題。

事實上，紅寶石的寶石，所以它看起來，當它被認爲是轉向CSS張入內嵌於電子郵件這只是搶佔了所有的風格，不重視媒體查詢，如視Roadie不與媒體查詢工作：https://github.com/Mange/roadie#my-media-queries-dont-work-how-can-i-fix-them

來源

2014-03-26 15:28:36 DKhanal

引導3：電子郵件違約，甚至在屏幕上

回答

相關問題