# RWD(上)
###### tags: `RWD`
## What is RWD(Responsive Web Design)
響應式網站設計，Responsive 響應式代表著，網頁內容可以依照螢幕寬度，馬上反應在排版上。也就是說，同一個 HTML 文本，可以透過 CSS 編寫，依照不同裝置（手機、桌機、平板）螢幕寬度，無論直立或橫放，都能流暢的縮放、更改版面配置、甚至是控制網頁上的文字顯示與否。
<font color="red">**手機、桌機同網址。同一個 HTML 文本，CSS 能依照不同螢幕寬度的條件，來改變排版。**</font>
## RWD 重要的精神：設置檢視區 viewport

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

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

* 利用 meta viewport 標籤，控制瀏覽器大小變化時，網頁內容的寬度、縮放該如何調整。
* 註明 width=device-width ，讓網頁內容可以依據「裝置寬度」，靈活運用裝置的獨立像素，可以自由改變排版。
* 註明 initial-scale=1 ，讓網頁 CSS 像素：裝置獨立像素＝1:1，如此一來，無論手機直立、橫放，都能確保網頁能完整運用螢幕寬度。

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

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

## CSS權重
### 規則:
1. HTML標籤 +1分
2. CLASS選擇器 +10分
3. ID選擇器 +100分
4. element +1000分 (html標籤直接寫style樣式)
5. !important
6. 先看權重，在看先後順序，後者贏
7. 永遠不要用ID (ID權重太大不好覆蓋)
8. 不會看html class名稱的順序，只會看CSS先後順序

//有一個h1的標籤，class為 .title

h1{ //權重: 10000+1
    color:black !important;
}
.title { //權重: +10
    color:pink;
}
.title{ //權重: +10 但是如果沒有!improtant的話 同樣10分樣式會選擇後者
    color:blue;
}
.title h1{ //權重: +11
  color:orange;
}

## 參考資料:

[RWD 響應式網站設計是什麼？對 SEO 的好處有哪些？](https://awoo.ai/zh-hant/blog/rwd-website-seo/)