# RWD 權重計算及重點

### RWD (Responsive Web Design)-響應式網頁設計

- **第一步 : viewport 設定**
- **`<meta name="viewport" content="width=device-width, initial-scale=1.0">`**

- **第二步 : CSS media Queries 語法**
- ==**權重計算方式 : 先看權重加總,在比較語法排列先後(後>先)**==
- HTML 標籤：1 分
- class 選擇器：10 分
- ID 選擇器：100 分
- inline style：1000 分
- !important：10000 分

- 第三步 : 寬度與單位配置
- CSS-Reset :
- img的Reset :

            img{
            	**max-width:100%;
            	height: auto;**
            }

- 全域 border box :

            *,*::before,*::after{
            	box-sizing: border-box;
            }

### 補充:

- 人眼視野範圍 : 1000px~1440px (主要內容放在這裡面)
- 斷點推薦:
- 手機:767px
- 平板:992px
- 不要用body底下直接下一個div全部包住全部，上中下分開包(可符合寬螢幕應用)
- 手指最小點選高度範圍44px
- ==**網頁最好不要出現橫軸**==