# RWD 響應式網站
## 介紹
由於在現今生活中，人們時常會透過不同的裝置去瀏覽資料，而如果沒有使用RWD，就會產生在電腦上瀏覽沒問題，但到手機上就會出現圖文跑版、畫面比例錯亂、奇怪的排版等，因此RWD是現今網頁開發重要的一環。
響應式網頁（RWD，Responsive Web Design）可讓網頁自動在電腦、平板、手機⋯⋯等不同裝置的螢幕上，自動切換不同設計樣式，讓網頁畫面更方便閱覽。
## 使用方式
在寫完 CSS 之後加上下列這行，就會讓程式知道，當你在你所設定的螢幕大小之下的裝置瀏覽時，會自動切換到 `@media` 內的程式，以達成在不同大小的裝置下有相同的瀏覽體驗的效果。

@media (max-width: 螢幕大小) {
    
}

## 預覽RWD效果
要預覽網頁RWD的效果可以用幾種辦法
console內的功能、Responsive Viewer擴充工具 和 I love adaptive
### console
適用於只有用live server預覽網頁、還沒部屬上Github
使用方法:
打開console、console左上角的「切換裝置工具列」或按Ctrl+Shift+M


整個介面
上方的「尺寸:回應式」可以修改旁邊的 寬度 X 高度
或是設定成行動裝置的比例

下面的白條則是可以設定各種裝置的寬度 筆記型電腦1024px、平板電腦768px、大型行動裝置425px、中型行動裝置375px、小型行動裝置320px


### Responsive Viewer擴充工具
也適用於只有用live server預覽網頁、還沒部屬上Github

download:[Responsive Viewer](https://chromewebstore.google.com/detail/responsive-viewer/inmopeiepgfljkpkidclfgbgbmfcennb)
下載後直接在網頁開啟擴充功能就行
也可以新增其他裝置

### I love adaptive
適用於已經部屬上Github
[I love adaptive](http://iloveadaptive.com/)
輸入網址後就可以預覽各種ios或Android的行動裝置
也可以查看各裝置的寬X高

**上述方法不一定準確**
---

- Contributor: 王鈞宇、林彥均