六角學院 RWD 課程學習筆記（更新中）

發表於 更新於 分類於 Disqus：

本文為觀看六角學院「 一變應萬變的響應式網頁設計」的紀錄。

簡介

什麼是 RWD

響應式網頁設計（Response Web Design），2010 年由 Ethan Marcotte 提出的概念。使用 CSS3 Media queries ，使網頁在不同的裝置上對應不同的解析度而有適當的呈現；讓使用者在操作上有較佳的體驗，減少使用者進行縮放、平移和捲動等操作。

現今的行動裝置流量佔網際網路流量的一半以上，因此以行動裝置為優先的響應式網頁設計就變得很重要。

Viewport

要使用響應式網頁設計，必須在 HTML 的 <head> 中加入 <meta name=“viewport”> 。
Emmet 的語法為 meta:vp 。

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

裝置的尺寸和解析度不同，網頁呈現的大小就會不同；所以需要設定 width=device-width 。

查詢裝置規格：Device Metrics - Material Design

content 可以使用的屬性如下：

  • width
  • height
  • initial-scale
  • minimum-scale
  • maximum-scale
  • user-scalable

相關說明： CSS Device Adaptation Module Level 1

關於解析度

  • pt ：印刷點點的最小單位，大小是 1/27 英吋。
  • pixel ：螢幕硬體的最小單位，也就是螢幕能呈現最細緻的點點。
  • dpi ：每一英吋裡的 pt 數；值愈大，印刷的品質就愈精細。
  • ppi ：每一英吋裡的 pixel 數，又稱為像素密度；值愈大，螢幕畫質就愈好。
  • dp (density- independent pixel) ： 160 dpi 時一個 pixel 的大小

以下雖然寫的是 dpi ，但實際上卻是指 ppi 。

  • ldpi 低密度：120 dpi ，為 240 x 320 px ， 1 dp = 0.75 px
  • mdpi 中密度：160 dpi ，為 320 x 480 px ， 1 dp = 1 px
  • hdpi 高密度： 240 dpi ，為 480 x 800 px ， 1 dp = 1.5 px
  • xhdpi 超高密度： 320 dpi ，為 720 x 1280 px ， 1 dp = 2 px
  • xxhdpi 超超高密度： 480 dpi ，為 1080 x 1920 px ， 1 dp = 3 px

Media query

在 CSS 中使用 @media 來設定各個螢幕尺寸的樣式。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 由大尺寸的螢幕往小尺寸撰寫 */
body{
        color: red;
}
@media(max-width:1024px){
    body{
        color: blue;
    }
}
@media(max-width:768px){
    body{
        color: green;
    }
}

由於同樣權重的 CSS 樣式，會以後面的為優先，所以如果是由大尺寸的螢幕開始撰寫，要使用 max-width ；反之用 min-width 。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
/* 由小尺寸的螢幕往大尺寸撰寫 */
body{
        color: red;
}
@media(min-width: 375px){
    body{
        color: blue;
    }
}
@media(min-width: 768px){
    body{
        color: green;
    }
}

常見版型佈局設定

原則或語法

  • 禁止橫向卷軸
    • 設計版面時，盡量不要出現橫向卷軸。這樣使用者還要左右拉動，沒辦法順順的看整個內容。
  • max-width
    • 運用 max-width 的方式，讓視窗大於 max-width 時能固定寬度，小於時又能保持彈性；這樣不會出現橫向卷軸，也可以少寫一個斷點。
  • %
    • % 以父元素的高度或寬度為基準，可以讓子元素保有彈性。

三欄式流體設計

在不同 max-width 下，用 % 做出自適應的效果。

See the Pen RWD 三欄式流體設計 by C.L.Huang (@clhuang224) on CodePen.

左側 Float 固定、右側流體式設計

左側欄位用固定寬度及浮動，右側則用 margin 推出空間。
在 768 px 的裝置下，則改為上下欄位，欄位中的選項改為橫向，並利用偽元素清除浮動。

See the Pen RWD 左側 Float 固定、右側流體式設計 by Lynn (@clhuang224) on CodePen.

網頁版型框架設定

隨寬度改變圖片、取消浮動。

See the Pen RWD 網頁版型框架設定 by Lynn (@clhuang224) on CodePen.

UI 設計原則

  • 網頁版的內容放進手機板時可以酌量刪減
  • 多欄式佈局可以依據人的視野寬度來考量
  • 手指的點擊範圍大概是 44 px
  • 注意 touch 和 hover 的差異

斷點規劃

  • 以熱門的斷點為優先
  • 可以先做幾個斷點，再參考 Google Analytics 來增加熱門裝置的斷點
  • 考慮 Mobile First 或 Desktop First
  • 常用斷點
    • iPad ： 768px
    • iPad 以下： 767px
    • iPhone 6 Plus ： 414px
    • iPhone 6 ： 375px
    • iPhone 5、SE ： 320px
  • 查詢瀏覽器使用率：StatCounter Global Stats
  • 查詢裝置解析度：Device Metrics - Material Design
  • 可以用專門的 class 來處理背景滿版但內容置中的效果。

See the Pen RWD 背景滿版、內容置中效果 by Lynn (@clhuang224) on CodePen.

響應式表格

當螢幕寬度比表格小時，內容容易擠成一團，或是要移動整個橫向卷軸。
可以用不同方式解決。

  • 隱藏部分資訊
    • 手機版隱藏一些不必要的資訊
    • <td> 的寬度總和超過 <table> 時不會超出，不滿時會分配剩下的寬度，所以不用特別調整手機版的寬度
  • 獨立橫向卷軸
    • 在 <table> 外包上一層元素，並用 overflow-x: auto
    • <table> 可用固定寬度
  • 直向排列
    • 將 <th> 隱藏，並利用 data 屬性及偽元素產生新的標題區塊

See the Pen RWD 響應式表格 by Lynn (@clhuang224) on CodePen.