---
tags: rwd
---
# 1. 基本環境介紹
## 基本環境建置
`<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">`

* Emmet熱鍵 meta:vp
* viewport 是什麼?
viewport主要是為了智慧型手機，顯示網頁時畫面較小的問題，
W3C在HTML制定了專門的標籤語法給網頁使用，可在智慧型手機上自動調整畫面顯示

* content="width=device-width 瀏覽器顯示寬度=裝置寬度，(螢幕解析度強制設為載具寬度)
* user-scalable=no 禁止使用者放大縮小，如果不希望使用者縮放可加上這段語法
* initial-scale=1.0縮放比為1
* maximum-scale=1.0, minimum-scale=1.0 限制使用者最大與最小縮放比率

* viewport還有以下參數:
device-width畫面寬度
device-height畫面高度
initial-scale初始縮放比
maximum-scale 最大可縮放比(老師最多設定2)
minimum-scale最小可縮放比
user-scalable使用者是否可以縮放

## CSS3 Media Query觀念

@media(max-width: 375px){
}
@media(max-width: 569px){
}
@media(max-width: 768px){
}

* 寫響應設計，依不同斷點設計
Mobile First: 從手機寫到pc用**min-width**
Desktop First: 從pc寫到手機用**max-width**

* 假設預設為紅色
低於或等於768px(ipad直式) 的顯示藍色
低於或等於 375px 的顯示綠色
轉橫向是667px 所以為藍色

## 各種資源連結
* [screensiz.es](http://screensiz.es/)查各裝置螢幕尺寸