負責人：王婕瑜
授課時間：2020-04-09 (四)

RWD 基本概念

  • 全名為：Responsive web design，響應式設計
  • 主要目的是使網頁在各種尺寸的裝置上，可以呈現合適比例的原則。讓內容跟水一樣，在不同的容器（裝置）中流動，顯示最適合的模樣
    圖片來源
  • 舉個例子，在這個網站裡，隨著螢幕寬度變小，它的 header 變為漢堡選單，文字自動換行，中央區塊的內容從橫向排列變為縱向排列，我們就可以說這個網站符合 RWD 的設計原則。要做到這樣的效果，需要 CSS 提供的 Media Queries 功能和 viewport 的設定。
  • 總結 RWD 設計的特點：
    • 彈性的圖片（依照螢幕大小比例伸縮）
    • 流動的區塊（文字隨著螢幕大小換行）
    • 多種版面（不同尺寸的裝置相對應的呈現方式）

為什麼要用 RWD？

  • 行動網路取得越來越方便，使用者開始用各種形式的裝置上網，例如：手機、電腦、平板。而許多網站為了因應這樣的趨勢，另外開發手機 APP 、行動版網站等等，這樣一來，就多出了許多維護成本，而使用 CSS 功能控制版面的方式，就能減少開發成本。
  • 建立行動版網站的目的是讓使用者可以更快速的找到資料，但許多行動版網站為了節省流量，刪減了部分內容，或更改原有的功能列，讓使用者不得不切回電腦版。如果網站根據 RWD 原則設計，就能提供更舒適的瀏覽體驗。

RWD 實作

  • 為了實現這個原則，需要 HTML、CSS 和 JavaScript 等技術，可以全用 CSS ，也可以使用 Bootstrap 框架，加速開發效率。

RWD 實作方法

  • 設定 Viewport
    設定手機網頁的螢幕解析度
    _ Viewport：檢視區，瀏覽網頁時瀏覽器顯示畫面的區域
    _ 由於智慧型手機的螢幕較小，照原本網頁的寬度上顯示的文字在手機上來看太小了，所以調整手機瀏覽器的螢幕解析度，才能讓使用者得到較舒適的閱讀狀態。
    `=html

    ` ![](https://i.imgur.com/KmT0Z40.png)

  • 圖片設定

    • 在設定圖片大小時，如果使用絕對寬度，在不同的裝置上就可能超出可以瀏覽的範圍，若調整為相對寬度的值，就可以正常地顯示內容
    • 把原本的 px 換成 %，達到依畫面尺寸縮放的功能
    1
    2
    3
    4
    5
    <!--CSS-->
    img {
    width:100%;
    height:auto;
    }

  • 決定 RWD 設計模式

    • 決定內容在不同 Viewport 下如何流動
    • 舉個例子：主體為流動 (mostly fluid)
      _ 內容被垂直堆疊於最小檢視中
      _ 螢幕超出 600px 時，主要與次要內容佔據整個螢幕寬度。
      _ 超過 800px 時，三個區塊都會顯示，使用完整螢幕寬度。

      _ 更多設計模式可以參考 回應式網頁設計模式

  • 套用 CSS Media Queries
    透過媒體查詢功能，我們可以得知用戶裝置的相關資訊，就可以進一步針對裝置套用合適的 CSS。

    • 可以查詢的資訊

      • width：視區寬度：真正代表目前瀏覽器渲染的範圍
      • height：視區高度
      • device-width：裝置寬度
      • device-height：裝置高度
      • orientation：裝置寬高比
      • aspect-ratio：視區寬高比

    • 裝置類型

      • all：所有裝置
      • print：印表機列印輸出
      • screen：一般電腦螢幕
      • speech：朗讀式裝置

    • 條件語法

      • only 表示指定特定單一條件
      • and 表示多個條件都必須符合
      • not 表示不要某一個條件
      • 舉個例子：
        1
        2
        3
        4
        5
        6
        7
        8
        9
        <!--.pic 原寬度爲 300px，當我的裝置是螢幕且寬度至少有 900px 時，也就是大於等於 900px 時，.pic寬度變更爲 500px-->
        .pic{
        width: 300px;
        }
        @media screen and (min-width:900px) {
          .pic{
            width: 500px;
          }
        }

    • 設定版面流動方式

      • 舉個例子：主體為流動 (mostly fluid)
      1
      2
      3
      4
      5
      6
      7
      8
      9
      10
      11
      12
      13
      14
      15
      16
      17
      18
      19
      20
      @media (min-width: 600px) {
      .c2, .c3, .c4, .c5 {
      width: 50%;
          }
      }

      @media (min-width: 800px) {
        .c1 {
          width: 60%;
        }
        .c2 {
          width: 40%;
        }
        .c3, .c4 {
          width: 33%;
        }
        .c5 {
          width: 34%;
        }
      }

LAB-01 Media Queries 練習

  • 在網頁中顯示一盒子，隨著寬度拉大至 500px 時，盒子寬度變寬至 500px 並且變爲綠色，寬度繼續拉大至 1000px 時，盒子寬度變寬至 1000px 並且變爲藍色。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
 <!--HTML-->
 <div class="box"></div>
 <!--CSS-->
 .box{
 width: 300px;
 height: 100px;
 background-color: pink;
}
@media screen and (min-width:500px){
 .box{
   width: 500px;
   background-color: green;
 }
}
@media screen and (min-width:1000px){
 .box{
   width: 1000px;
   background-color: blue;
 }
}

LAB-02 寫一個符合 RWD 原則的網頁

  • 網頁內容須包含：
    • 會隨著螢幕尺寸改變大小的圖片
    • 依喜好選擇一種版面流動方式，應用在網頁裡
      可以參考 回應式網頁設計模式

Bootstrap

Bootstrap 基本概念

  • 一種前端框架，讓網站設計人員可以依據這些既有的樣式進行設計，方便及快速的製作出網站
  • 提供建立 RWD 網站的功能

    What is Responsive Web Design?
    Responsive web design is about creating web sites which automatically adjust themselves to look good on all devices, from small phones to large desktops.

    一個會自動調整、在所有類型的裝置上瀏覽都好看的網站。

  • Bootstrap 3 vs Bootstrap 4
    • BS4 是最新的版本，速度較快，允許的樣式資料多一些
    • BS4 並不支援 IE8 以及 IE9，若有考慮給使用上述兩種瀏覽器的使用者，使用 BS3 即可

為什麼要使用 Bootstrap？

  • 簡單：只需具備基本 html 與 css 知識者即可使用
  • 響應式：適用於手機、平板、桌上型電腦
  • 行動優先（mobile-first）
    針對不同型態的使用者，網站應依照目標客群所使用的裝置考慮網頁的呈現方式，客製化每一種尺寸的螢幕應有的功能，行動優先比較像以智慧型手機等行動裝置設計，呈現出核心功能，而非單純顯示另一種版面的電腦版網站

    圖片來源
  • 網頁兼容性：適用於各類型的瀏覽器（如：Chrome, Firefox, Internet Explorer 10+, Edge, Safari, and Opera）

開始使用 Bootstrap

  • 載入官方網站提供的 CSS 檔案
    1
    2
    <!--放在head標籤裡-->
    <link rel="stylesheet"　href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
  • 許多組件需要使用 JavaScript 才能運行，這些組件在文件中都查得到
    1
    2
    3
    4
    <!--</body>結尾標籤前，在頁面末尾放置-->
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js" integrity="sha384-smHYKdLADwkXOn1EmN1qk/HfnUcbVRZyYmZ4qpPea6sjB/pTJ0euyQp0Mk8ck+5T" crossorigin="anonymous"></script>
  • 用 lang 屬性設定語言，它是 html 標籤的一個屬性，用於設定頁面上所有文字的語言。
    1
    <html lang="zh-TW">
  • lang 屬性可用於任何 HTML 元素
    如果在網頁中某個區塊想要另外標示為其他語言，那麼就可以直接寫在那個元素上，例如：
    <p lang="fr">Je suis français</p>
  • 想寫什麼樣式，在文件中就可以找到寫好的樣式，顏色、邊框、間隔這些會放在通用裡，按鈕、下拉選單、導航欄等等在元件裡

Grid System 網格系統

  • 為了方便網頁設計師設計自己的網站欄位規劃， bootstrap 4 提供了一個網格系統
  • 由 Row（列）與 Column（行）來建立頁面架構的，內容則裝在他們組成的框框內
  • 隨著螢幕尺寸或 viewpoint 的增加，最多分成 12 行

    圖片來源

寫法

  • 基本架構如下
1
2
3
4
5
6
7
8
<div class="container">
  <div class="row">
    <div class="col-*-*"></div>
    <div class="col-*-*"></div>
  </div>
  <div class="row">...</div>
</div>
<div class="container">....</div>
  • 關鍵是class="row"，只有在該類別底下時，所有的 col-*- 的類別設定才會生效
  • 依照不同裝置尺寸，設定網格顯示的比例
    • 手機設備：xs
    • 平板設備：sm
    • 電腦版：md
    • 電腦版桌面（大型）：lg
  • 格式是：.col-尺寸-占了幾格，例如：
    .col-md-6　大於 720px，呈現兩欄
    .col-lg-4　大於 960px，呈現三欄
    .col-xl-3　大於 1140px，呈現四欄

LAB-03 將網頁改為使用 Bootstrap

  • 將使用到 Media Queries 的地方改為 Grid System 的寫法
  • 依照官方文件加上任一 Bootstrap 元件

參考資源

  1. RWD 教學入門：響應式網頁設計的實作方法｜ ALPHA Camp Blog
  2. Day6 如何做出響應式網頁(RWD)？ - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天
  3. 使用 Veiwport 設定手機網頁的螢幕解析度 【飛肯設計學苑】教學範例區
  4. 第 10 堂課 - 初探 bootstrap 網頁製作
  5. 簡介 (Introduction) · Bootstrap 4 繁體中文手冊
  6. [day12]-好的網站和好的建築一樣，先打造好地基！-格線系統（Grid System）篇
  7. Day09：小事之 HTML lang Attribute - iT 邦幫忙::一起幫忙解決難題，拯救 IT 人的一天