如何設計響應式的電子郵件
響應式的電子郵件在編碼上比響應式的網頁更加麻煩，因為我們必須同時考慮各種郵件軟體(如outlook)、及各家線上郵件平台(如Google Gmail, Yahoo! Mail)的呈現, 加上郵件平台及軟體對css 的支援性較差、又或者會強制剝除我們的css設定，因此在響應式的電子郵件在設計上往往限制更多。
以下我們整理出設計響應式的電子郵件一些簡單技巧
使用行內CSS
使用行內css是最保險的作法，因為部份郵件平台會強制剝除我們的<style>設定
行距及段落間距
光是<p>的間距設定、Google Mail與 Yahoo! Mail就有極大的差別、因此如果你相當介意行距及段落間距、建議您不要使用<p>，改用<div>或<span>將每行文字標記起來。並使用margin-bottom設定與下段的間距。
響應式的欄位
在設計響應式網頁時我們會使用@media query來變化欄位的數量，例如螢幕小於600時使用單欄式設定、超過600時使用雙欄式設定、大於1000時使用三欄式設定。
但是在設計響應式的網頁時、我們完全無法使用這個方法。
如果希望郵件的內容可以依螢幕寬度改變欄位數目時、我們必須直接指定每個區塊的寬度、再利用float: left 讓區塊貼著左邊排列，當排列的區塊總合大於螢幕寬度時、超過的區塊自然會排到下一行去。另外別忘了幫區塊加上max-width: 100%; 的設定、以確保使用者不需左右拉動螢幕。
<div style=”width: 300px; max-width: 100%; padding: 10px; float: left”>區塊內容</div> <div style=”width: 300px; max-width: 100%; padding: 10px; float: left”>區塊內容</div> <div style=”width: 300px; max-width: 100%; padding: 10px; float: left”>區塊內容</div>
如果我們希望區塊可以置中排列的話、就不要使用float: left; 改用display: inline-blok; 並在外層包上一個 text: align;
<div style=”text-align:center”> <div style=”width: 300px; max-width: 100%; padding: 10px; display: inline-block; vertical-align: top;”>區塊內容</div> <div style=”width: 300px; max-width: 100%; padding: 10px; display: inline-block; vertical-align: top;”>區塊內容</div> <div style=”width: 300px; max-width: 100%; padding: 10px; display: inline-block; vertical-align: top;”>區塊內容</div> </div>
指定字型
在<head>裡使用@font-face
@font-face {
font-family:'Orbitron';
font-style: normal;
font-weight: 400;
src:url('http://weburl/font.eot');
src:url(' http://weburl/font.eot ') format('eot'),url(' weburl/font.woff2') format('woff2'),url('http:// weburl/font.woff') format('woff'), url('http:// weburl/font.ttf') format('truetype');
}
使用@import (以google font為例)
@import url(http://fonts.googleapis.com/css?family= fontname);
使用<link> (以google font為例)
<link href='http://fonts.googleapis.com/css?family= fontname ' rel='stylesheet' type='text/css'>
以上就是掌握響應式郵件設計的基本原則，只要掌握這幾個技巧、您就可以輕鬆擁有響應式的電子郵件。
我要留言