# RWD 技巧
###### tags: `RWD`

## 1. meta 語法

<meta name="viewport" content="width=device-width, initial-scale=1.0">

**viewport 讓瀏覽器清楚知道，「寬度尺寸變化」與「網頁的內容縮放」兩者的比例。所以一定要加入這一行才能寫響應式**

## 2. media query

## 使用 @media query 為不同的寬度給予不同的樣式
@media 的語法，是一種簡易的條件篩選功能，可以套用在 CSS 樣式中，當螢幕寬度符合條件，就會查詢到相對應的 CSS 樣式。

@media(max-width: 600px){
    // 在螢幕寬度<=600px時，所套用的css樣式
}
@media(min-width: 300px){
    // 在螢幕寬度 >= 300px時，所套用的css樣式
}

### 注意 CSS 權重，先看權重再看先後
在撰寫 CSS 時，同樣的標籤且相同的方式撰寫(都用 class 選擇器)如果寫了兩個不同屬性，下面會覆蓋上面的
比如:

.title{
    color:white;
}
.title{
    color:red;
}

這時 .title 標籤的顏色會是紅色會覆蓋掉白色這個屬性

**同樣道理，在撰寫 media query 的時候，有可能寬度會重複進而下面的屬性覆蓋上面的屬性**
**所以撰寫的時候要注意順序，使用<font color='blue'> max-width </font>時記得<font color='red'>由大到小的尺寸</font>撰寫，使用<font color='blue'> min-width </font>時記得<font color='red'>由小到大的尺寸</font>撰寫**

## 3. 斷點

選擇尺寸作為 RWD 改變樣式，通常都是選擇2~3個斷點使用

### 常用斷點

* 1280
* 992
* 768
* 576
* 414
* 375

## 4. container 與內容器

* container 可以先做設定
container 就是包覆其他區塊的最大區塊

.container{
    max-width: OOpx;  // 依據設計稿寬度給予最大寬度
    margin:0 auto; // 置中
    padding-left:16px;
    padding-right:16px;
}

* 內容器設定
內容器就是包在 container 裡面的東西
1. 寬度單位使用 %
2. 斷點搭配寬度設定

.item{
    width:50%:
}
@media(max-width:768px){
    .item{
        width:100%;
    }
}

* img 響應式設定

    max-width:100%:
    height:auto;

## 提醒

1. 內容物不要寫死寬度 (px)
2. 不能出現 x 軸