Upgrade to Pro — share decks privately, control downloads, hide ads and more …

RWD不是你想的那樣!-twMVC#13

twMVC
May 10, 2014

 RWD不是你想的那樣!-twMVC#13

講者:米雪兔 (http://www.dotblogs.com.tw/rab/
講者簡介:現職104人力銀行視覺設計,no2studio工作室網頁設計, 從事網頁設計多年,專長為網頁設計排版與摔筆。

課程簡介:RWD到底是甚麼鬼玩意? 為什麼提到響應式設計你家的設計師就會開始摔筆? RWD響應式網頁的設計概念與製作方法。

課程時間:70 分鐘

twMVC

May 10, 2014
Tweet

More Decks by twMVC

Other Decks in Technology

Transcript

  1. Responsive Web Design 3 • 中文翻譯為 響應式網頁 / 自適應網頁 •

    配合手機、平板、電腦螢幕各種不同平台,以不同 畫面呈現,讓使用者可以舒適瀏覽的網頁設計
  2. 解析度是?? 17 DPI = Dot per inch 每英吋內含幾個點(像素/px) DPI =

    Dot per inch 每英吋內含幾個點(像素/px) 1英吋 = 2.54公分 <- 2.54 cm -> <- 2.54 cm -> <- 2.54 cm -> 3 dpi = 3 points per inch 8 dpi = 8 points per inch 16 dpi = 16 points per inch
  3. 手機/平板/電腦螢幕 常見尺寸 18 • 320x480 (2:3) • 480x800 (3:5) •

    540x960 (16:9) • 640x960 (2:3) • 720x1280 (16:9) • 768x1280 (3:5) • 1080x1920 (16:9) 手機 • 600x800 (4:3) • 600x1024 (75:128) • 768x1024 (4:3) • 800x1280 (16:10) • 1536x2048 (4:3) • 1920x1080 (16:9) 平板 • 1280x800 (16:10) • 1280x1024 (4:3) • 1366x768 (16:9) • 1440x900 (16:10) • 1680x1050 (16:10) • 1920x1080 (16:9) • 2560x1440 (16:9) • 2880x1800 (16:10) 電腦螢幕
  4. 36 手機 • 簡單 簡單 再簡單 • 畫面很小,怎麼在 有限範圍中呈現最 精華的內容

    • 選單通通收起來 固定選單/側欄選單 • 向量圖示 • 按鈕大小,最小不 能小於44px x 44px
  5. 41 裝置寬度 / device-width • 螢幕解析度不一定等於device-width ex: iPhone 5 解析度

    640 x 960 裝置寬度 320 • 以螢幕解析度作為device-width,有可能進入大 部分網站時都看到縮小的畫面 <meta name="viewport" content="width=device-width; initial- scale=1.0; maximum-scale=1.0; user-scalable=0;">
  6. 49 工具網站 • Screen siz.es / 常用裝置解析度與裝置寬度表 http://screensiz.es • IcoMoon

    / 免費 icon font http://icomoon.io • Web Color Data / 配色收集網站 http://webcolourdata.com/