Skip to content

Latest commit

 

History

History
97 lines (77 loc) · 8.1 KB

rwd.md

File metadata and controls

97 lines (77 loc) · 8.1 KB

Responsive Web Design (RWD)

新手上路 ?? {: #getting-started }

  • Responsive Web Design Introduction

    • Web pages should not LEAVE OUT information to fit smaller devices, but rather ADAPT its content to fit any device 不是拿掉一些東西，而是根據 device 調適。
    • It is called responsive web design when you use CSS and HTML to resize, HIDE, shrink, enlarge, or move the content to make it look good on any screen. 不含 JavaScript??

  • Responsive Web Design Viewport

    • The viewport is the user's visible area of a web page. 會因 device 而異；不完全等同於 screen size? 因為手機畫面可能會切割
    • 在 tablet、mobile phone 出現之前，網頁只為 computer 設計 -- static design + fixed size，但這樣的設計塞不進 viewport，瀏覽器的 quick fix 是把整個網頁縮小，但這不是最佳解。
    • HTML5 可以透過 viewport 這個 metadata 控制 viewport，例如 <meta name="viewport" content="width=device-width, initial-scale=1.0">；其中 width=device-width 會把 screen/viewport width 當做 page width，而 initial-scale=1.0 則是設定一開始的 zoom level。下面的範例，光是加了 viewport meta tag 就有很明顯的差異。
    • Users are used to scroll websites vertically on both desktop and mobile devices - but NOT HORIZONTALLY! So, if the user is forced to scroll horizontally, or zoom out, to see the whole web page it results in a poor user experience. 這一點很關鍵!! 有幾點建議 1) Do NOT use large fixed width elements 要隨 viewport width 調整 2) Do NOT let the content rely on a particular viewport width to render well (例如過往常見的 "建議使用 1024 x 768 瀏覽") 3) Use CSS media queries to apply different styling for small and large screens

  • Responsive Web Design Grid #ril

    • 首先要確保所有 HTML element 都套用 box-sizing: border-box -- padding 跟 border 都算在 element 的大小裡；從 box-sizing - CSS: Cascading Style Sheets | MDN 看來，box-sizing: border-box 可以確保 child container 不會突出 parent container 外。

      * {
    box-sizing: border-box;
}

    • 目標是建立 responsive grid-view -- 將畫面分割為 12 個欄位 (column)，所以每個 column 暫用的寬度是 100% / 12 = 8.33% -- to have more control over the web page. 為此建立 12 個 class .col-{1,12}：

      .col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

      所有 column 會應往左靠 (floating to the left)：

      [class*="col-"] {
    float: left;
    padding: 15px; // 下面這兩個 properties 只是為了方便說明
    border: 1px solid red;
}

      搭配 `class="col-{1,12}" 就可以定義某個區塊 (例如 menu、content 等) 要佔幾個 columns 的寬度：

      <div class="row">
  <div class="col-3">...</div> <!-- 25% -->
  <div class="col-9">...</div> <!-- 75% -->
</div>

    • The columns inside a row are all floating to the left, and are therefore taken out of the flow of the page, and other elements will be placed AS IF THE COLUMNS DO NOT EXIST. To prevent this, we will add a style that clears the flow: 試不出來前後有什麼差別??

      .row::after {
    content: "";
    clear: both;
    display: table;
}

  • Responsive Web Design Media Queries #ril

    • Media query 是 CSS3 引進的做法 -- It uses the @media rule to include a block of CSS properties only if a certain CONDITION is true. 例如：

      @media only screen and (max-width: 600px) { // 視窗寬度 <= 600 時才生效
    body {
        background-color: lightblue;
    }
}

    • 上一節 responsive grid view 的安排將在這裡發揮作用，設定一個分割點 (breakpoint) -- 螢幕寬度多少要開始採用另一套 layout：

      @media only screen and (max-width: 768px) { // 跨過 768px 這門檻，所有套用 `col-*` 的區塊，都會放大到 100%
    /* For mobile phones: */
    [class*="col-"] {
        width: 100%;
    }
}

  • The building blocks of responsive design - App Center | MDN #ril

  • Responsive Navigation Patterns - App Center | MDN #ril

Viewport Meta ??