近年越來越重視「響應式網站設計」，先定義一下何謂響應式網站設計：響應式網頁設計（英語：Responsive Web Design，通常縮寫為RWD），又稱為自適應網頁設計、回應式網頁設計。是一種網頁技術，該設計可使網站在多種瀏覽裝置（電腦、行動裝置iPhone、iPad等等）呈現最適合閱讀及使用的內容。
而在設計網站時該怎麼實現呢？實務上有兩種方法可以做到：
1. 使用 CSS Media Queries，依照「不同螢幕寬度」設定不同的 CSS，呈現的內容也就會不一樣。
2. 在 Html 裡加入 javascript，判斷「只要是行動裝置」就直接跳轉到「手機版網站」。
差別在哪裡？
第一種 Media Queries 的方法會比較有效率，iPhone、iPad 進入網站直接套用不同 CSS 直接呈現；
第二種需要多寫手機版的 Html 跟 CSS，相對麻煩許多，但可能今天老闆叫你過去說「我們的網站也要做成響應式網站」，在舊版網站程式碼結構錯綜複雜情況下，反而寫一個新的手機版網站，並在舊有網站加入 js 判斷直接導入會比較快。或等等諸多原因讓你只能選擇第二種來做，所以兩種方法都會做介紹。
1. CSS Media Queries
剛開始，先來看一下國外的 RWD 設計範例：「Mediaqueri.es」
進入網站後可以看到，每一列都有四張圖，分別代表不同裝置看到的不同內容。
很美吧！那Media Queries該怎麼寫呢？很簡單，跟著下面的 CSS，為不同寬度的裝置設定不同 CSS 就可以了。
而在設計網站時該怎麼實現呢？實務上有兩種方法可以做到：
1. 使用 CSS Media Queries，依照「不同螢幕寬度」設定不同的 CSS，呈現的內容也就會不一樣。
2. 在 Html 裡加入 javascript，判斷「只要是行動裝置」就直接跳轉到「手機版網站」。
差別在哪裡？
第一種 Media Queries 的方法會比較有效率，iPhone、iPad 進入網站直接套用不同 CSS 直接呈現；
第二種需要多寫手機版的 Html 跟 CSS，相對麻煩許多，但可能今天老闆叫你過去說「我們的網站也要做成響應式網站」，在舊版網站程式碼結構錯綜複雜情況下，反而寫一個新的手機版網站，並在舊有網站加入 js 判斷直接導入會比較快。或等等諸多原因讓你只能選擇第二種來做，所以兩種方法都會做介紹。
1. CSS Media Queries
剛開始，先來看一下國外的 RWD 設計範例：「Mediaqueri.es」
進入網站後可以看到，每一列都有四張圖，分別代表不同裝置看到的不同內容。
很美吧！那Media Queries該怎麼寫呢？很簡單，跟著下面的 CSS，為不同寬度的裝置設定不同 CSS 就可以了。
@media screen and (min-width: 1200px) {
// 如果使用者之視窗寬度 <= 1200px，將會再載入這裡的 CSS。
}
@media screen and (min-width: 768px) and (max-width: 979px) {
// 如果使用者之視窗寬度介於 768px 到 979px，將會再載入這裡的 CSS。
}
@media screen and (max-width: 767px) {
// 如果使用者之視窗寬度 <= 768px，將會再載入這裡的 CSS。
}
@media screen and (max-device-width: 480px) {
// 如果使用者之裝置寬度 <= 480px，將會再載入這裡的 CSS。
}
如果有點看不懂，那我說明一下 min-width、max-width、min-device-width、max-device-width 的不同點之後就可以讓你輕鬆理解。
min-width、max-width設定的是「瀏覽器」的寬度，
min-device-width、max-device-width，看到device顧名思義就是設定「行動裝置」的寬度，
是不是輕輕鬆鬆！
這樣設定之後，為各別裝置加入 CSS 就可以正常呈現了。
但如過要設定更進階的：手機直得看橫著看的話，可以看Stephen Gilbert的這篇文章，我個人蠻喜歡的，裡面有 iPhone、iPad 等各項行動裝置的 Media Queries 設定值讓你參考。
2. 以 javascript 判斷為 android、iOS系統行動裝置時，自動跳轉到手機版網站
在你的 html 裡的<head>到</head>這段中間貼入下面程式碼，即可完成 js 判斷功能。
min-width、max-width設定的是「瀏覽器」的寬度，
min-device-width、max-device-width，看到device顧名思義就是設定「行動裝置」的寬度，
是不是輕輕鬆鬆！
這樣設定之後，為各別裝置加入 CSS 就可以正常呈現了。
但如過要設定更進階的：手機直得看橫著看的話，可以看Stephen Gilbert的這篇文章，我個人蠻喜歡的，裡面有 iPhone、iPad 等各項行動裝置的 Media Queries 設定值讓你參考。
2. 以 javascript 判斷為 android、iOS系統行動裝置時，自動跳轉到手機版網站
在你的 html 裡的<head>到</head>這段中間貼入下面程式碼，即可完成 js 判斷功能。
<script type="text/javascript">
if(navigator.userAgent.match(/Android|iPhone|iPad/i)) {
window.location = '手機版網址';
}
</script>
希望大家都能順利邁向響應式網站，
讓網站使用者有一個舒適的閱讀環境！！
歡迎留言交流！
讓網站使用者有一個舒適的閱讀環境！！
歡迎留言交流！