哈囉～很快的已經來到了第九天，前面帶給大家都是一些網頁的基礎，後面會針對各種主題有更深入的探討喔，今天要介紹的是響應式設計的設計重點，也是電商網站很需要重視的一部分！

什麼是響應式設計（RWD）呢？

它是一種網頁的設計方法，目的是要讓網頁能夠適應不同的平台，隨著視窗寬窄的改變去調整網頁的佈局，不管是在電腦、平板、手機都可以很好的做呈現，給使用者優質的瀏覽體驗。

該如何開始做響應式設計

1. 確定網頁的用途、使用者族群，可以更好掌握哪種裝置的使用者較多。
2. 訂出幾種版本的排版樣式（電腦、平板、手機等）。
3. 確定好後開出對應尺寸的版面，以及考慮順序。

開始做設計的順序，一般建議從小螢幕（mobile）開始思考，以最小的範圍開始做排版，把重要的資訊先放進去，之後在大螢幕（desktop）上再一步步把元素加進來，可以避免由大至小資訊量過多、排版過雜的問題。當然如果使用者主要會是在電腦上使用，那就考慮大螢幕多一點，如果主要是在行動裝置上，就更著重於小螢幕上的設計。

媒體查詢( media qurey )
媒體查詢其實就是一個篩選器，你可以利用它來幫助你篩選不同的設備，去套上對應設備的樣式，這邊主要跟大家分享在CSS裡面的用法。

主要寫法有兩種：由小到大＆由大到小

由小到大

• 優先考慮手機排版，再依序做平板、電腦
• ＠media 使用min-width寫法

min-width的意思是指，當最小寬度 >(斷點數字)px 時，就套用裡面的 CSS 語法

@media(min-width: (斷點數字)px){ 
 //條件下的樣式設定
}

由大到小

• 優先考慮電腦排版，再依序做平板、手機
• ＠media 使用max-width寫法

max-width的意思是指，當最大寬度 < (斷點數字)px 時，就套用裡面的 CSS 語法

@media(max-width: (斷點數字)px) {
 //條件下的樣式設定
}

常見的斷點設置
以下是比較常見的斷點，可以依個別需求去設置，只要滿足主要的幾個斷點，其他比較針對特定設備的優化也可以先查詢規格再去添加。

1. 針對於小型的行動裝置 (<320px)
2. 針對於智慧型手機設置，寬度是小於480px (<480px)
3. 針對於高智能行動裝置，比如Ipads，寬度是小於768px (<768px)
4. 針對於大設備，比如PC端，寬度是大於768px (>768px)
5. 添加適用於平板設備的斷點，大於768px小於1024px (>768px 和 <1024px)
6. 針對於較寬的螢幕裝置，大於1024px (>1024px)