---
# System prepended metadata

title: RWD響應式網頁設計/與顧客的溝通/content-box/media query/float淺談
tags: [HTML]

---

###### 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圖片
   分為上述三種版本
   不同的排列方式

