###### tags: `HTML`

# RWD響應式網頁設計/與顧客的溝通/content-box/media query/float淺談
- 22/5/4-HTML
# RWD響應式網頁設計
# 與顧客的溝通
- RWD依照不同硬體顯示不同畫面尺寸
- 與客戶的溝通:

1. 與客戶溝通時
操作的方式,以多大裝置為主
手機 / 桌機 / 平板
若全都要可以, 但需要先以一項為優先考量
通常以桌機 較為主流

2. 先功能 在美化
先將設計介面 分為 功能面 與 美觀面
先做一個版本 告知比較醜 用於與顧客溝通功能面
先確定功能符合顧客需求
再以這個功能架構去做美化 CSS JS
以避免花過多時間修改

- 大致尺寸:手機576 平板577-591 電腦591以上

# content-box
- border sizing分為
1. margin-box
2. border-box
3. padding-box
4. content-box 等
以命名的區塊作為作為外框,將線向內縮成為區塊的一部分
通常以border-box/content-box較為常用

# media query
- @media
當設置的條件為True時,就可以啟動填寫的內容
例:
<pre>
@media (max-width:576px){
h1{color: red;}
}
</pre>
當網頁寬度被縮小到低於576px時
h1標籤的內容顯示為紅色

# 練習

1. 頁面顯示 三個區塊
簡易文字 title lorem p3
文字內容 Lorem 30

2. 分為 桌機 平板 手機
桌機red
平板green
手機blue
與不同的排列樣式

3. 新增header圖片
分為上述三種版本
不同的排列方式