檢視響應式網站設計的原始碼

[[分類:Etable]]
響應式網頁設計(Responsive Web Design)簡稱RWD。
==與app開發比較之優缺點==
優點有：
#開發成本與時間比APP低：APP必須開發iOS版及Android版兩個版本，一個版本皆數十萬元起跳，開發時間加上審核上架時間相當長。
#不需下載APP就能使用：這不只是響應式網頁的優點，可說是所有手機版網頁相較於手機APP的最大優勢。 APP必須到iTunes、Google Play下載，APP若要更新，必須重新審核過後，再通知所有下載用戶更新。反觀自適應網頁與手機網頁，只要管理者更新網站，每次連上網頁都會是最新版本。免費Wi-Fi熱點越來越多、 3G費率持續調降，即使無法離線瀏覽也不再是問題了。
#維護成本比APP低：APP完成之後要不定期需針對新版本測試，才能確定APP在新手機上能運作順暢。以目前新手機上市的頻率來看，這是永遠不會結束的測試地獄。
手機版網站等於是另一個用在行動裝置的公司網站，相對地，企業必須花2筆網站維護成本。
#可同時適用不同裝置：APP必須開發iOS版及Android版兩個版本。手機版網站則需要搭配電腦版網站，才能符合多數裝置規格。同時還要安裝偵測使用裝置的小程式，才能讓手機讀電腦版網址會開手機版網頁、 電腦讀手機版網址會讀電腦版網頁…這一串繞口令其實也代表了目前電腦+手機版雙網站介面的內容分享問題，設計自適應網站就完全不會有這個問題。
#品牌形象一致：同一個網站適用於各種裝置，自然不需要針對不同版本設計不同視覺效果。
#符合使用者習慣：行動裝置的搜尋功能仍是以「搜尋網頁」為主，舉例來說，有人用手機搜尋「飯店」2字時，只會搜尋各家飯店的網頁， 不會搜尋飯店開發或帶有飯店名稱的APP。開發出來的APP必須再花一筆行銷費用大力宣傳，讓使用者知道有這個APP，還要能引起興趣下載、使用。
#利於分享：APP沒有網址可以分享，以蘋果日報的APP為例，APP分享出去的網址是電腦版網頁的網址，網站若偵測到是用手機開啟網址，再自動轉址到手機版網頁的網址。
即使做了手機版網頁，分享出的網址通常都是手機版網頁的網址，當朋友用電腦開啟連結時，卻不見得會轉回電腦版網站。蘋果日報的手機網站就是如此。 同樣的網頁內容拆成電腦版、手機版兩個網址，按讚數、流量分析等也會跟著拆成兩筆數據，對SEO相對比較弱。
自適應網頁就沒有這個問題，分享出去的都是同一個網址。
#利於SEO(Google喜歡)：在SEO這一方面除了大勝app外，而相較於獨立網址的手機版網站，自適應網頁可以避免重覆的內容、保持網頁原本的連結，因此自適應網頁設計的原理與使用習慣都有利於於SEO(搜尋引擎最佳化) 詳見《自適應網站設計對SEO有什麼好處?》

缺點有：
#小螢幕尺寸不適合複雜的功能或介面。
#如果你打定主意要用很複雜的功能，如拍照、定時喚醒、購物…等，只能砸錢開發APP。
#如果電腦版必須維持很複雜的介面，手機版則必須大量縮減內容，兩個版本架構不同且差異相當大的話，另外做手機版網站是比較適合的。
#載入速度問題：使用同一份HTML及CSS，所以不是在手機上或電腦上，下載的是同一個網站，下載速度也是一樣的，只是網頁偵測到是手機裝置時會隱藏部份元素，事實上載入速度並不會變快。
#需針對手機使用者習慣調整：手機使用者與電腦使用者的網頁瀏覽習慣是完全不同的，要能符合兩邊的使用習慣，必須下很大的功夫規劃瀏覽動線。

==字的尺寸設定==
css3 中的絕對長度：
<table class='nicetable'>
<tr><th>單位</th><th>含意</th>	<th>等於</th></tr>
<tr><th>cm</th>	<th>公分</th>	<td>1cm=96px/2.54</td></tr>
<tr><th>mm</th>	<th>公厘</th>	<td>1mm=1/10 cm</td></tr>
<tr><th>Q</th>	<th>¼公厘</th>	<td>1q=1/40 cm</td></tr>
<tr><th>in</th>	<th>英吋</th>	<td>1in=2.54cm=96px</td></tr>
<tr><th>pc</th>	<th>派卡</th>	<td>1pc=1/6 in</td></tr>
<tr><th>pt</th>	<th>印刷點</th>	<td>1pt=1/72 in</td></tr>
<tr><th>px</th>	<th>像素</th>	<td>1px=1/96 in</td></tr>
</table>
css3 中的相對長度：
<table class=nicetable>
<tr><th>單位</th>	<th>相對於</th></tr>
<tr><th>em</th>	<td>目前元素的font-size</td></tr>
<tr><th>ex</th>	<td>目前元素字體的x-height</td></tr>
<tr><th>ch</th>	<td>目前元素字體中的 0 (ZERO，U+0030)字形的寬度</td></tr>
<tr><th>rem</th>	<td>根元素的font-size</td></tr>
<tr><th>vw</th>	<td>1% 的視區寬度</td></tr>
<tr><th>vh</th>	<td>1% 的視區高度</td></tr>
<tr><th>vmin</th>	<td>1% 的最小視區大小</td></tr>
<tr><th>vmax</th>	<td>1% 的最大視區大小</td></tr>
</table>
===px===
px 的特性是屬於 絕對數值，他不受外圍的單位影響，只要固定是 12px，就會以 12 像素呈現。

===em===
<div class='tright'><img src='https://upload.wikimedia.org/wikipedia/commons/f/f8/M_versus_em.svg' width='100'/></div>
在活版印刷中，大多數字體的字母大寫 M 常常最接近每個字母的寬度，所以被用來代表點陣字的字寬。金屬字模的大小不能超過 em 。

<div style='border:#888 solid 1px;width:33%;padding:3px;font-size:10px;float:right;clear:right;'>例一：font-size: 10px
	<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1em;'>font-size: 1em</div>
	<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1.2em;'>font-size: 1.2em</div>
	<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1.4em;'>font-size: 1.4em</div>
</div>
在 CSS 中，em 代表目前元素的 font-size ，1em 即是 1 個的文字大小， 1.5em 也就是 1.5 倍的文字大小。em 會受到外圍的文字大小所影響。

從右方的範例可以發現，如果外圍是以 10px，內層的文字第一層 1em 等同於 10px，隨後的依比例放大。<br/><br/><br/>

<div style='border:#888 solid 1px;width:33%;padding:3px;font-size:10px;float:right;clear:right;'>例二：font-size: 10px
	<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1em;'>font-size: 1em</div>
	<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1.2em;'>font-size: 1.2em</div>
	<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1.4em;'>font-size: 1.4em
		<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1em;'>font-size: 1em</div>
		<div style='border:#888 solid 1px;margin:3px;padding:3px;font-size:1.4em;'>font-size: 1.4em</div>
	</div>
</div>
接下來觀察 em 的疊加效應：外層的文字大小從 10px 開始，可以看到內層的 1em 文字大小等同於外層的 10px ，隨後的逐漸放大。如果再加入一層在內部，文字就會以 1.4×1.4 的倍數再放大，這是 em 的相對比例單位的特性，是優點也是缺點，如果無法掌握就容易失控。

===rem===
rem，則是CSS3新推出來解決em疊加問題的字級單位。其文字基準取決於最外層的 html 文字大小，很適合用在整體的尺寸大小切換，以 RWD 響應式網頁來說，可以依據不同的尺寸，統一切換整體網頁的文字大小。rem 中的 r 是 root 的意思。

不是每個瀏覽器都有支援 rem ，以下是各瀏覽器支援 rem 的最低版本：
<table class=nicetable>
  <tr>
   <th>性質</th>
   <th>Chrome</th>
   <th>Firefox (Gecko)</th>
   <th>Internet Explorer</th>
   <th>Opera</th>
   <th>Safari</th>
  </tr>
  <tr>
   <td>rem</td>
   <td>4 (532.3)</td>
   <td>[http://en-US/Firefox/Releases/3.6 3.6] (1.9.2)</td>
   <td>9.0</td>
   <td>11.6</td>
   <td>4.1</td>
  </tr>
 </table>