Flex RWD 排版方式

一變應萬變的響應式網頁設計

1920px 講解
RWD 原理
RWD 網站分享

環境建立(以下 no 編號為範例程式碼編號)

viewport 設定 (no.1)

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

CSS media Queries 語法 (no.2)

寬度與單位配置

max-width：運用在圖片與 HTML 標籤上(no.3)
% 單位的運用 (no.4)
max-width 與 % 的運用 (no.5)

排版細節

三欄排版 (no.6)
三欄圖文排版 (no.7)
完整版型設計(no.8)

權重覆蓋遊戲

HTML 標籤：1 分
class 選擇器：10 分
ID 選擇器：100 分
inline style：1000 分
!important：10000 分

RWD 網站分享

斷點規劃+大網站設計範例

PC - 1200px
iPad - 768px
iPad以下 - 767px
iPhone 6 Plus - 414px (視專案族群)
iPhone 6 - 375px (視專案族群)
iPhone 5、SE - 320px

有學生應該會很好奇，
為什麼還會有一個 767px 的斷點，
因為通常 iPad 直式是 Android、IOS 平版很常見的大小，
再接著 767px~320px 我便會視為他們都是手機 size，
所以在 767 px 以下時就會直接把他變成手機版型，
畢竟 767px~6xx size 相當少見，一開始各位學生可以先確保一些熱門斷點上優化即可，
至少可以滿足 80% 以上的客戶，
不用太吹毛求疵，當然你力求優化的話也是 ok 的。

再來 320px 是你最小需要注意的 SIZE，
現在仍然有許多手機是 320px，尤其是小 size 的 iPhone，
以前甚至有 240px 的手機，但現在已經相當稀有了。

所以如果是 PC 做到手機的話，語法就會有點像是這樣：

.wrap{
  max-width: 960px;
}
.header {
  height: 80px;
}
.list li{
  width: 33%;
}
.list h3{
  font-size: 24px;
}
@media(max-width: 768px){
  .header{
    height: auto;
  }
  .list li{
    width: 48%;
    margin: 0 1%;
  }
}
@media(max-width: 767px){
  .list li{
    width: 98%;
  }
}
@media(max-width: 414px){
  .list li{
    font-size: 18px;
  }
}

Flex RWD 排版方式

環境建立(以下 no 編號為範例程式碼編號)

寬度與單位配置

排版細節

權重覆蓋遊戲

RWD 網站分享

斷點規劃+大網站設計範例

影音觀念補充

Read more

切版直播班 - 開學典禮

🏅Day43 - React 路由練習 (1) - React Router 建立

上課直播間 ZOOM 註冊

上課直播間 ZOOM 註冊