---
# System prepended metadata

title: RWD 權重計算及重點

---

# 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 :
            ```css
            img{
            	**max-width:100%;
            	height: auto;**
            }
            ```
        - 全域 border box :
            ```css
            *,*::before,*::after{
            	box-sizing: border-box;
            }
            ```
### 補充:

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