跳至主要內容區
:::

如何設計響應式網頁 ?- 響應式網頁設計

響應式網頁的特性

  • 相同的網頁程式,就能適應各種裝置的螢幕解析度。
  • 跨作業系統 ( Windows、iOS、Android )、跨瀏覽器 ( IE、Firefox、Chrome、Safari、Opera )。
  • 行動優先 ( Mobile First )、內容優先 ( Content first )。

需要具備的技能

1. 網頁語言 – HTML5

響應式網頁跟傳統網頁一樣都是使用 HTML,熟悉 HTML5 標籤 ( Tag ) 的用法是最基本的需求。

2. 網頁樣式 – CSS3

網頁的佈局與排版工作全靠 CSS 完成,因此要非常熟悉 CSS3 的使用技巧。

3. JavaScript

響應式網頁有許多功能必需靠 JaveScript 完成,例如點擊某個按鈕,就會下拉出一個訊息框,或是在不同螢幕解析度時,要改變某個網頁物件的屬性。因此 JavaScript 也是必備的技能之一。

網頁佈局

1. 用「流體格局」取代 「固定格局」

「固定格局 ( Fixed layout )」指定寬度或間距時採用固定的數值 (例如: width: 960px),這樣會造成在任何裝置上都是以相同的寬度 (960px) 顯示,對於手機或平板,這樣的寬度會超出螢幕的寬度,使用者必需橫向捲動螢幕,才能看到其餘的內容。

固定格局樣式
固定格局樣式

固定格局樣式

  • Header 寬度為 960px。
  • Header之下分成三個部份:
    • 左邊部份寬度為 530px。
    • 中間部份寬度為 200px,左右各留 15px 間距。
    • 右側部份寬度 200px。

「流體格局 ( fluid layout )」則是用百分比取代固定的數值,因此不論使用哪種瀏覽器,或是裝置的螢幕尺寸如何變化,網頁格局都會等比例縮放。

流體格局樣式
流體格局樣式

流體格局樣式

  • Header 寬度為 100%。
  • Header之下分成三個部份:
    • 左側部份寬度為 50%。
    • 中間部份寬度為 20%,左右各留 5% 間距。
    • 右側部份寬度為 20%。

2. meta 標籤加入 viewport

在網頁的 <head> … </head> 中加入下列程式碼:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2, user-scalable=yes">
  • meta name=”viewport”
    所謂的 viewport 是指「使用者在網頁中的可看到的區域」,它會因裝置的不同而改變。
  • width=device-width
    頁面的寬度要根據裝置的寬度而改變。
  • initial-scale=1
    頁面載入時的縮放比例。
  • maximum-scale=2
    最大可縮放比例。

網頁內容

1. 間距

跟網頁佈局一樣的做法,用來設定間距的 padding 及 margin 也使用百分比取代固定數值,例如:

.box {
    padding: 30px;
}

這在電腦螢幕看起來很正常,但到了手機的小螢幕,30px 就變成一個很寬的距離,若改成

.box {
    padding: 3%;
}

間距就會依裝置螢幕的寬度自動調整,也不需要再用 @media screen 另外調整。

2. 圖檔

  • 對於大型圖檔,請事先縮小或裁切圖片,因為圖檔越大代表載入的時間會越久,讓手機載入大型圖片是沒有意義且浪費時間與傳輸流量。
  • 網頁中要進行縮放的圖片,不能指定寬度或高度。一旦指定了寬度或高度,圖檔大小就會固定而無法進行縮放。
  • 為了讓圖檔能自動調整寬度,請在 CSS 中加入
    img {
        max-width: 100%;
        height: auto;
    }

3. 圖和文要分開

網頁內容要將「圖」和「文」分開,然後利用 CSS 編排呈現的樣式。經常會在一些購物網站上,看到描述產品的說明頁面,將產品的全部內容做成一張圖檔,這在電腦螢幕上瀏覽不會有問題,但到了手機,因為圖檔會等比例縮小,裏面的文字當然也跟著縮小,這樣就會造成閱讀上的困擾。

此外,Google 搜尋引擎只認識純文字,對於圖檔內的文字無法辨識,這對網頁 SEO 也會造成影響。

4. 儘量減少使用表格

傳統的網頁設計喜歡用表格來編排網頁的內容,但到了響應式網頁設計,這種做法可能需要修正,因為表格是響應式網頁中最難處理的部份,單純的使用 CSS 很難調整,必需搭配 jQuery 將表格打散成 <ul> 及 <li>,再重新編排樣式。

響應式網頁設計要考慮各種裝置的特性及螢幕寬度,因此網頁設計需要更多的技巧,也嚴峻的考驗網頁設計人員對於網頁佈局和動線的規劃、CSS 的設定、以及 jQuery 功力。

Top
改變字體大小
調整背景顏色