RWD淺談

先前我們在介紹Web Font時曾經提過：「RWD網頁可以針對不同的載具選擇不同粗細的字型，讓小螢幕上顯示的字不會糊成一團」，除了道出了Web Font的優點，也點出了一個好的RWD網站，應該要將載具適合的字級大小考慮進去，而今天我們就繼續介紹，什麼是RWD(Responsive Web Design)式的網頁。

根據Google Developers對於RWD的介紹中解釋：「任何解析度的裝置，伺服器傳的都是同一份的HTML，透過CSS來判定裝置的解析度後，生成適合該裝置大小的畫面顯示。」，因此一個網站可以用電腦、平板、手機來瀏覽，且都會得到最適合的畫面與內容。

任何解析度的裝置，伺服器傳的都是同一份的HTML。

早在RWD概念盛行前，就已經有許多購物與行動網站注意到，根據電腦螢幕所顯示的內容架構，可能不適合在手機上，因此他們購買了第二個網域，建立專給手機的頁面，以COSTCO網站為例，如果你看到的網域包含了特殊的前贅字(http://m.costco.com)，可能就是這樣的方式。但早先HTML與CSS並未發展到目前的階段，因此這樣形式的網頁多採WML(Wireless Makeup Language)語法所編寫，然而該語法是以XML為基礎，有點類似簡易版的HTML，因此在許多功能的撰寫上都會受限。

在智慧型手機流行後，各家瀏覽器廠商如Chrome, Firefox, Safari, Opera等，也都有針對手機版本所開發的瀏覽器，這時，開始有了以偵測瀏覽器是哪種版本來決定對應內容的方式，而這種方式由於各廠商與各版本間有太多不同的組合，因此在會需要針對許多的版本做設定，甚至要定義不同的手機解析度就是個大議題。

因此在HTML5和CSS3出現之後，許多可以自動偵測螢幕大小與根據大小調整內容比例的語法，就成為了RWD概念的核心技術：簡單的說就是取得裝置的螢幕大小，設定每個標籤的內容該出現的比例與位置。這樣的方式，讓網站工程師只需要針對一個網站開發，就可以讓拜訪者(Visitor)根據其裝置得到最佳的畫面呈現，除了畫面美觀外也更有效的吸收網站資訊，因此成為了近年來製作網頁的熱門詞彙。

HTML5和CSS3是RWD概念的核心技術。