最近在試試重新建造一個網站。想玩玩新意思，故設計了一個橫向式的網站，這樣就可以更好更完整地顯示闊度很長的圖片。橫向式的網站設計也不算難，最簡單的就是用 CSS 將 一個放置內容的 div 的闊度，改成一個很大的數字。但這個方法就忽略了若果內容過短，會剩餘很多空白位置的問題。故在 CSS Tricks – How to Create a Horizontally Scrolling Site一文中就提供了一個使用 jQuery 的方法，去在 div 外層加上 table, td, tr ，這樣就可以顧及內容長度不一的問題了。最後加上 JavaScript 的功能，去容許使用滑鼠的滑輪，左右移動網頁，這就更加方便讀者了。

不過受到某些原因的影響下，發覺在某些桌面電腦的解析度之下，瀏覽效果不太好。故開始研究下 Responsive Web Design 的原理與運作，順道用這個新設計的網頁來做試點，看看如何寫 Responsive Web Design 的網站。世界上越來越多人會使用平板電腦，手提電話來瀏覽網站了，故用上這技術可以讓不同裝置的讀者有更好的瀏覽體驗。當然，網上也有些預先建構好的結構，例如是 Bootstrap，讓大家更方便地建構一個方便用上不同裝置的讀者，瀏覽的網站。

不過自行加上 Responsive Design 元素也不算太困難。CSS 3 Media Queries是一個關鍵，感覺上就好像是 if 的關係。

這次網站用上的是一個檔案內包含所有 CSS 碼。具體內容就是：

//首先載入一系列的 CSS，例如 body 的字體等等，這些是共用的話，可以放在這兒。
//另外在這個例子中，視窗闊度大於 1024px 者，只會用到這一系列的 CSS

@media screen and (max-width:1024px) and (min-width:700px){
如果使用者的視窗闊度介乎 700px 到 1024px 的話，會再載入這系列的 CSS
}

@media screen and (max-width:699px){
如果使用者的視窗闊度小於或等於 699px，則再載入這一系列的 CSS
}

當然，可以自行設定不同 Media Queries 的格式，來選擇再載入那一系列的 CSS。這個網站也列上不同的Media Queries ，可作參考。

注意，下面再載入的 CSS，其效果是覆蓋著原本一開始在檔案為首的 CSS。所以，就是一開始有一個完整的 CSS，然後要微調的那個部份，才在下面加入相對應的 CSS 碼，而並不是將所有 CSS 抄一次到下面部份再改。

網上亦指出，在新建構網站時，則可以先思考流動裝置的用戶需要，才慢慢建構到桌面用戶。兩個方向得出來的結果好像一樣。但其實在一些細節的部份，例如是顯示圖片，若果先考慮流動用戶，例如先顯示一個較小型的圖片版本，若果視窗大於某個闊度，則去顯示另外一個版本（這亦可以透過簡單的 jQuery 去做到），這樣倒會更方便所有用家。不過，CSS 3 這技術，聽說在 IE8 以下是不多支持的，所以我想，用哪個方向去編寫 CSS ，就要看你想顧及哪些用戶先了。

改好了 CSS，最後就是要在 之中加入以下程式碼：
<meta name="viewport" content="width=device-width, initial-scale=1.0">

來讓手機用戶真的可使用到上面的 CSS Media Queries。
倒有更多的 viewpoint 程式碼，來控制手提裝置上，瀏覽器的運作。不過就要你試試怎樣運用來合適了。

倒在設計 CSS 時，有一些小提示，就是在編寫給流動裝置的 CSS 時，儘量避免使用上固定的 width，height 等等（那當然，有些地方就另外計算，故也要看你的用途），而是用上百分比，來替圖片，或是不同的 div 來定義闊度，這樣就可以在不同的裝置上，自動調教相片的大小了。就好像要一幅圖片完整地佔用版面闊度，可以用上max-width:100%, height:auto; 來讓圖片大小可以隨大小而自動變動。另外，要記住的是，不管用上甚麼的版面，所要 load 的東西其實也是一樣，或許會比平時多一點。所以，若果要架設一個手機桌面完全不同的網站，還是用其他方法好了。

其他一些幫到你去看看介面在不同裝置，或是不同螢幕大小，會是如何的網站：
Responsinator
Screenfly

結果就弄出三個介面：