紀錄工作經驗、相關知識,解決技術相關問題。

CSS, 網站相關

RWD 新手教學- 從入門到實務一篇搞定

[新手觀念] 什麼是 RWD

RWD 英文全名為 Responsive Web Design ,中文又可稱為【回應是網頁設計】、【自適應網頁設計】、【響應式網頁設計】。

RWD 是一種網頁技術,簡單的說,主要是讓網頁在不同的裝置上,能以不同解析度呈現,這樣能讓使用者有較好的預覽體驗。

如果你希望看看官方的說法,可以到 維基百科 回應是網頁設計觀看,下面我們會針對 RWD 從最開始的畫面規劃,到製作時你應該注意的細節,一一進行講解。

[新手觀念] RWD 基本設計概念 – 如何規劃 RWD 網頁

不要使用10年前或更久以前的經驗來看現在的網站。

前端經驗

如今製作網頁,最基本面臨的就是多種裝置上的呈現(早期裝置單一),所以在設計上,除了考量原先的PC版本,你更應該去進一步考量手機版、平版等多種裝置上的呈現布局(依據你的客群需求而定)。

RWD 設計上,你需要先掌握 2 個要點 :

  1. 網頁縮放時的區塊間位移
  2. RWD 主要版面寬度的訂定

以下我們針對這兩點做更細部說明。

網頁縮放時的區塊間位移

HTML 主要就是一個個版塊組合起來,所以在製作 RWD 時也是基於這點再加上CSS 來對各尺寸來做出控制。

而區塊的特性就像拼圖 or 積木一樣,白話說就是【由上到下,由左到右】進行排列。

為了好識別,以下(圖一) HTML RWD 示意圖,我將每個區塊都標上編號。

(圖一) HTML RWD 示意圖

當版面中的區塊,因縮放而被擠壓到時,同一排的東西,左邊的會在上面,右邊則會往下掉。

RWD 主要版面寬度的訂定

定義主要的寬度,是確保用戶使用對應解機度的裝置時,能最大確保用戶所看到的視覺,同設計一致,避免因為視覺不同,導致品牌想傳遞的形象、資訊、意涵與記憶點受到影響。

如果你透過網路查詢 RWD 相關製作,很多會跟你說語法怎麼用,或區塊間基本如何位移,好少會跟你說 RWD 需要定義主要的版面尺寸。

網頁規劃到製作的4個階段

在實際製作網頁上,基本都會經過以下階段:

  • 第一階段 – 網頁企劃 : 需求訪談階段,收集資訊並決定 TA、呈現主軸( 資訊型、形象推廣、購物…等)
  • 第二階段 – 版面規劃 : 依據主軸,結合操作動線進行網頁個區塊規劃
  • 第三階段 – 設計出圖 : 將規劃範本交由設計,由設計進行美化
  • 第四階段 – 頁面製作 : 工程師按圖施工

其中,RWD 主要版面寬度的訂定,必須在一開始,取決於網站/網頁主要服務的 TA or 網站類型

如果你的 TA 主要常用的裝置只有 PC,那 RWD 你其實不用太著墨,反之,如果你是購物網站,TA廣泛, 主要常用的裝置涵蓋了手機、平板、桌機,那麼你最少就應該去定義三個版面,如下:

  • 桌上型電腦 : 1440px (一般可支援1920px 顯示的螢幕)
  • 平板 : 998px – 平板瀏覽器常用最大解析度
  • 手機 : 375px – 手機最常用解析度

上面就是最基本的 RWD 主要版面寬度定義,實際請依據需求增修。

RWD 缺少寬度定義會發生什麼事?

舉個例子,如果有一家設計公司(以下稱A公司),在交付網頁設計稿時,只交了一張寬 1400px 寬度的網頁設計稿,好奇嗎,單單一張單一尺寸的 RWD 設計稿,到底會造成什麼後果?

需求方/ 客戶看到第一眼 : 手機怎麼長這樣?

往前追朔製作廠商,廠商常有的反應 :

製作廠商回應 : 我們也是按圖施工,我們就接到一張1400px的圖,我們沒做錯。

製作廠商 RD 說 : 只有一張 1400px 的圖,問過沒有其他圖,其餘只好用通靈。

再往前追朔設計公司,A公司在面對質疑時,通常的反應 :

很自信、理直氣壯地回應:『我們是專業的,我們家也有前端,這就是 RWD 網頁設計稿,這樣就夠了。』

以上就是一個很典型的案例,看出問題了嗎?

如果你沒有去定義網站所需要的主要尺寸,很有可能你請託的設計公司,會很不專業的交付給你”一個尺寸”的設計稿,到最後所有專案製作人員無所依據。

你最有可能遇到的就是 RD 開始通靈,進而導致整個網站在畫面呈現上走針,整個原先該體現給用戶的形象感蕩然無存。

所以該省的工,請不要省去,請在一開始就定義好,才能避免到最後走針 or 被偷料的狀況,有時只差了基本的東西,結果就會差很多。

目前(2022)市面上最常見的 RWD 裝置寬度

RWD 常用裝置寬度說明
1920px – 桌上型螢幕(寬)螢幕滿版 or 解析大於 1920尺寸螢幕
1440px – 桌上型螢幕、筆電一般可支援1920px 顯示的螢幕
1366px – 13吋筆電一般公司行號員工用事務機、文書機
1024px – 平板平板瀏覽器常用最大解析度( iPad Pro )
375px ~ 500px – 手機手機最常用解析度
320px – 手機 iPhone SE, iPhone 5
目前(2022)市面上最常見的裝置寬度

依據服務的 TA,選擇2項~全選,是常見的事情。

很多人會使用 bootstrap 來製作 RWD ,但…不要只會使用 bootstrap,卻不知道為什麼,RWD 的尺寸,永遠會隨著科技進步,裝置推誠出新而做出調整。

想知道有那些詳細的尺寸,可以看這篇

[新手入門] 如何快速上手 Media Query

Media Query 使用教學

Media Query 的詳細指令與分類,這裡我們而外詳細介紹。

以下(圖二)我們節錄之前解說的部分內容,來方便新手使用,以下是 Media Query 的基本結構與白話對照。

(圖二) media query 基本結構與白話對照
(圖二) media query 基本結構與白話對照

常用 Media Type – 解決大部分需求

min-width頁面寬度,大於時套用
max-width頁面寬度,小於時套用
Media Queries 簡易參數整理

Media Query 使用範例

大多數情況使用 :

/* EX : 當寬度 >= 1024px 時套用 */
@media screen and (min-width : 1024px ){
/* CSS Style */
}

/* EX : 當寬度 < 768px 時套用 */
@media screen and (max-width : 768px ){
/* CSS Style */
}

如果你要定義一個區間,可以寫成以下的方式 :

/* EX : 當寬度介於 1024px ~ 1400px 時套用 */
@media screen and (min-width : 1024px ) and (max-width : 1400px){
/* CSS Style */
}

到這裡,你已經可以開始撰寫想要的RWD樣式了。

在使用上,除非你遇到非常特別的案例,否則判斷條件足夠你克服80%~90%的專案需求。

[實務操作] 如何製作 RWD

[前置設定] 在 head 中設定 meta viewport

製作 RWD 第一步,在 HTML <head>中設定 meta viewport,一定要設,不然你CSS怎麼寫都不會有用,code 如下 :

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

viewport 可選參數說明

initial-scale初次載入縮放倍率,1等同於100%
minimum-scale最小縮放倍率,1等同於100%
maximum-scale最大縮放倍率,1等同於100%
user-scalable允許縮放,yes / no
viewport 可選參數說明

[應用] RWD 設定不允許縮放

常有情況不希望用戶對 RWD 網頁進行縮放,可使用以下兩個方法:

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

or

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">

設定 RWD CSS

建立一個RWD 用的 CSS ,並導入網站中。

/* href 放你製作好的 rwd css路徑 */
<link rel="stylesheet" href="/css/rwd.css">

依據UI設計,撰寫 RWD CSS 並調整畫面

請依據 UI 設計,在你所設定的 CSS 檔案中,使用 Media Query 撰寫出相對應的 RWD CSS ,要注意的是 @media 的使用,最好在原有的CSS後面,不然容易造成交錯覆蓋的狀況,範例如下。

/* EX  */

// 原有的 Style
h2 {
 font-size : 30px;
}

// 開始撰寫 Media Query 
@media screen and (max-width : 1024px ){
   h2 {
     font-size : 24px;
   }
}

@media screen and (max-width : 576px ){
   h2 {
     font-size : 18px;
   }
}

RWD 注意事項 – 你應該留心注意的事情

RWD 已經是目前的主流,相關的資訊其實網路上很容易查找,也有與多 CSS Library 可以使用,像是常聽到的 BootstrapMilligram

在製作上,Media Query的使用雖然很直觀、簡單,但如果你使用不當,依舊會對網頁產生不良影響,以下將告訴你,你該避免那些常見的RWD製作問題,以及如何才是良好的撰寫方法。

我該避免哪些不良的 RWD 撰寫方式?

避免狀況 1 : 避免邏輯衝突的撰寫方式

/* EX  */

.demo_style{
 // style
}

@media screen and (min-width : 1024px ) and (max-width : 1400px){
  .demo_style{
   // style
  }
}

@media screen and (min-width : 1200px ) and (max-width : 1500px){
  .demo_style{
   // style
  }
}

上面範例,可以看到,@media 的尺寸定義前後邏輯是衝突的,1024~1400 與 1500~1200 是重疊的,這會造成 CSS 後蓋前或的情況,也會造成後續在維護上難以管控。

避免狀況 2 : 避免自動給尺寸 -1 ( 新手必犯問題 )

/* EX  */

.demo_style{
 // style
}
/* 希望不要跟1024衝突,所以1024 -1 */
@media screen and (min-width : 768px ) and (max-width : 1023px){
  .demo_style{
   // style
  }
}
@media screen and (min-width : 1024px ) and (max-width : 1400px){
  .demo_style{
   // style
  }
}
/* 希望不要跟1400衝突,所以1400 +1 */
@media screen and (min-width : 1401px ) and (max-width : 1600px){
  .demo_style{
   // style
  }
}

上面範例,可以看到,@media 的尺寸間,會差距 1px,這種狀況,常常發生在剛接觸RWD的新手上。

新手在製作時,往往會希望不要讓尺寸相互衝突,所以自己將此吋 +-1,所以會導致網頁在RWD 縮放時,只要寬度剛好到碰尺寸交界點,如上面範例的 1024 , 1023 與 1400,1401,畫面常常會產生抖動、跑版、破板等的情況。

什麼才是 RWD @media 的撰寫良好習慣 ?

許多人在剛接觸、學習RWD 時,最先到google 去搜尋,但跑出來的結果,都是跟你說 Media Query 可以如何使用,卻鮮少有人說在製作實務上,他應該如何妥善使用,這往往導致新手寫出來的網頁,在驗收階段錯誤百出。

如果你是自己撰寫 CSS,本身沒有套用其他 CSS library,那這邊會建議你在一開始製作 RWD Media Query 時先思考:

  1. RWD 對應裝置的各個尺寸
  2. RWD Media Query 的方向性

RWD 對應裝置的各個尺寸

顧名思義,就是RWD在縮放時,你主要要支援的裝置尺寸。

舉例來說,如果你只是 One Page的活動網頁,且主要的TA是手機裝置,那麼你可能只須定義 768 一個尺寸,以下為手機裝置,以上為PC版,就足夠用了。

/* PC版 CSS */
.demo_style{
 // style
}

/* 768 以下手機板使用  */
@media screen and (max-width : 768px ){
  .demo_style{
   // style
  }
}

如果你製作的網頁是基本的RWD官網,那麼你可能會需要先定義好 PC、平板、手機的切換尺寸。

RWD Media Query 的方向性

這裡說的 RWD 方向性,是指你在撰寫時,應該先思考好,你的 CSS 樣式,要往哪個方向發展,遵守這樣的撰寫規則,可以有效避免 CSS 衝突 or 遺漏的問題。

以下直接提供兩個範本,可以任選一個使用 :

RWD Media Query 方向 :大→小 (  桌機→筆電→平板→手機 )

/* 以 PC 版為主要 Style,CSS 對應 width 1366px 以上 */
.demo_style{
 // style
}

/* 1366px 以下開始為筆電  */
@media screen and (max-width : 1366px ){
  .demo_style{
   // style
  }
}

/* 1024px 以下開始為平板 ( ex: iPad Pro )  */
@media screen and (max-width : 1024px ){
  .demo_style{
   // style
  }
}


/* 768px 以下開始為 小平板 & 手機(橫)  */
@media screen and (max-width : 768px ){
  .demo_style{
   // style
  }
}

/* 576px 以下開始為 手機(直)  */
@media screen and (max-width : 576px ){
  .demo_style{
   // style
  }
}

/* 320px 以下開始為 手機(直) 最小尺寸 */
@media screen and (max-width : 320px ){
  .demo_style{
   // style
  }
}

/* 以下自訂義特殊區塊 - 通常不會用到*/

RWD Media Query 方向 :小→大 (  手機→平板→筆電→桌機 )

/* 以 Mobile 版為主要 Style,CSS 對應 width 576 or 375 or 320以下 */

/* 576px 以下開始為 手機(直)  */
.demo_style{
 // style
}

/* 576px 大於開始為 小平板 & 手機(橫)  */
@media screen and (min-width : 576px ){
  .demo_style{
   // style
  }
}

/* 768px 大於開始為平板 ( ex: iPad Pro )  */
@media screen and (min-width : 768px ){
  .demo_style{
   // style
  }
}


/* 1024px 大於開始為筆電  */
@media screen and (min-width : 1024px ){
  .demo_style{
   // style
  }
}

/* 1366px 大於開始為 PC  */
@media screen and (min-width : 1366px ){
  .demo_style{
   // style
  }
}

/* 以下自訂義特殊區塊 - 通常不會用到*/

不論你是選擇尺寸由大寫到小還是小寫到大,max-width與 min-width都可以隨自己喜好、習慣去選擇使用,這裡只需要注意尺寸的撰寫順序,決定一種後,整體盡可能的統一,可以方便管理,也避免遺漏。

在使用 CSS library 後,又該如何定義 Media Query?

如果你有選用 CSS library,那麼你應該先去了解你所用的 CSS libaray 在 RWD Media Query規劃上是如何做的,掌握一個宗旨,網站的 RWD Media Query 撰寫規則盡量統一。

例如像大眾常用的 Bootstarp 5,就採用小→大的設計,所以你在後續要撰寫RWD時,盡量依造相同邏輯去撰寫,可幫助後續管理與維護。

/* 取自 bootstarp 5.0 CSS 片段*/

@media (min-width: 576px){
    .col-sm-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

@media (min-width: 768px){
    .col-md-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

@media (min-width: 992px){
    .col-lg-4 {
        flex: 0 0 auto;
        width: 33.33333333%;
    }
}

結論

以上就是最基本的 RWD 網頁製作流程,如果有相關問題,或是覺得有那裡不對的地方,歡迎下方留言提問與交流。

3 留言

  1. I don’t think the title of your article matches the content lol. Just kidding, mainly because I had some doubts after reading the article.

  2. I have read your article carefully and I agree with you very much. This has provided a great help for my thesis writing, and I will seriously improve it. However, I don’t know much about a certain place. Can you help me?

  3. I agree with your point of view, your article has given me a lot of help and benefited me a lot. Thanks. Hope you continue to write such excellent articles.

發表迴響