傾囊相授 ! MUKI 的 RWD 入門與實戰課程分享

RWD 入門與實戰講義

Avoid

以下內容是我在 RWD 入門與實戰課程的講義內容,免費放出來讓大家閱讀學習,歡迎分享與轉載 ( 請註明出處來源 )。
請勿盜用或用於商業用途,一但發現必定追究到天涯海角。

RWD 的基本組成:viewport

認識 viewport

viewport 用來告訴瀏覽器現在的裝置有多寬、多高。可以讓使用者在使用不同裝置看網站時,能有個基準比例。

  • 根據裝置的顯示區域來展示文檔 (html)
  • 可以透過放大與縮小 html,以符合裝置的可視區域
  • 通常會有初始值設定縮放的級別或其他規則

viewport 語法

HTML
  • width:使用 device-width (裝置寬度) 作為可視區域的寬度。
  • initial-scale:文檔初始的比例,用 1 表示 100% ,範圍從 0.1 ~ 10 可任填。
  • minimum-scale:最小可以縮放到 0.8 比例。
  • maximum-scale:最大可以縮放到 2.0 比例。
  • user-scalable:是否允許使用者進行縮放。no 不允許;yes 允許。

補充

iOS 10 版本提到:為了增強用戶的體驗,不管有沒有使用 user-scalable ,用戶都可以在 Safari 瀏覽器上縮放網頁。

承上,如果依然不希望使用者縮放,可以改用 JavaScript 禁用設定:

JS

總結

  • 將 viewport 應用在 RWD 網站上,可以很方便的建置一個適合手機、平板等不同裝置閱讀的環境。
  • viewport 也可以應用在非 RWD 的網站
HTML

RWD 的基本組成:流動式佈局

流動式佈局介紹

流動式佈局(Fluid Web Layout)是讓網站在排版時,把寬度從px改成%去排版,讓網站的版面可以參考父層,並用相對比例去分配寬度。

以下利用一個簡單的範例,教大家怎麼把網站版面改寫成流動式佈局。

這是一個用px排版的二欄式的版面

如果要將它改成流動式佈局版面,注意兩個要點:

  1. 把所有px單位改為%,並計算好與父層的相對比例。
  2. 最外層使用max-width設定寬度

改寫後的 CSS 如下(僅列出重點語法):

CSS

流動式網格佈局

如果 HTML 的層級愈多,在計算%時會非常不方便,所以我們可以改用流動式「網格」佈局替代。

網格系統並不是什麼新技術,從以前開始,就有許多設計師用網格在排平面或網頁稿件的版面。而現在有許多人把網格系統化,讓網頁設計師在排版時可以更快的上手,不用自己計算%

以下是一個 Grid System 的範例,範例中把網站總寬度切割成 12 等分,每一個區塊佔用的等份都是固定的。拖拉視窗可以發現寬度即使縮小,網格的數量也沒有減少。

☞ 補充

Bootstrap 也有網格系統(Grid System),所以我們可以使用 Bootstrap 幫我們快速建置基本的 RWD 網站。


RWD 的基本組成:客製化的 Layout 結構

一般來說,使用前面提到的網格式佈局,就可以做出一個 RWD 網站。但如果我們要在版面縮小時,修改元件樣式控制元件出現/消失… 等,這些是「網格式佈局」做不到的,因為網格式佈局只管寬度其他都不歸他管 XD。

因此,我們可以用 CSS 的 Media Query 語法幫我們實現這些功能或需求。

Media Query(ies) 介紹

Media query 的作用是,當偵測到不同尺寸的裝置時,給予對應的 CSS 設定。

在 RWD 的實作上,就是利用 media query 做出「共用一份 html,但是排版不同」的客製化 Layout。

可以讓裝置在任何寬度下,都可以有不同的 CSS 效果,例:

  • 縮小螢幕寬度時,選單跑到左側
  • 縮小螢幕寬度時,某些元素消失

補充

在做 RWD 網站時,Grid System(網格系統)跟 Media Query 通常是密不可分的,所以我們會同時用到這兩個技術。

Media Query 語法解析

以下是 Media Query 的規格:

CSS

寫成我們熟悉的 CSS 語法是:

CSS
  • mediatype : 裝置類型
    • all
    • screen
    • printer // 訪客列印網站資料
    • tv // 訪客用電視瀏覽網站
  • media feature : 裝置的規格
    • max-width / min-width / width
    • max-height / min-height /height
    • color
    • aspect-ratio
    • monochrome

參考資料: http://www.w3schools.com/cssref/css3_pr_mediaquery.asp

如何呼叫 Media Query

呼叫 media query 就跟呼叫 CSS 一樣,大致上有以下三種寫法:

1. 在 HTML 嵌入 CSS 檔案,這份 CSS 檔案會依據 media query 的設定顯示。

HTML

2. 在 CSS 檔案裡寫下 media query 的設定以及相關 CSS 語法

CSS

3. 在 CSS 裡使用 @import 嵌入另外一個 CSS 檔案

CSS

☞ 補充

雖然有這三種呼叫方式,但我們通常都只會使用第二種方法唷~。

Media Query 練習

這是一個已經用流動式佈局排好的頁面:

依照以往上課經驗,初學者在練習 Media Query 時,往往不知道該如何下手。我建議大家一開始先不要管「寬度」,只要先想著,如果我要做好這個功能,應該用哪些 CSS 語法?確定結果是你想要的後,再把這些耶你修改的語法單獨拉出來並加上寬度的條件。

☞ 練習一

網站寬度在 400px ~ 700px 之間,將 #sidebar#aside 的位置互換。

我們可以從頁面語法瞭解#sidebar以及#aside都已經用float排好版面了,如果要讓兩個區塊位置互換,其實只要在float上動點手腳即可:

CSS

☞ 練習二

網站寬度在 0px ~ 500px 之間,選單會從左右變成上下排列。

這個練習根據你的思維與慣用的語法不同,至少可以有四種寫法。在此根據思維的不同,分享兩個寫法給大家:

寫法一

假設我們已先設定好選單在桌機版的樣式:

CSS

那麼 media query 可以這樣寫:

CSS

☞ 補充

因為瀏覽器的寬度沒有負數,所以當寬度是 0 的時候,可以把 min-width 整段省略

寫法二

因為我們還沒有寫選單的樣式,而#menu沒有排版時,預設就是上下排列的狀態,因此可以把這個練習題目想成:寬度在 500px 以上,選單會變成左右排列

那麼我們只需要這樣寫就可以囉:

CSS

「RWD 入門與實戰」的講義暫時分享到此,因為後面的課程是直接用 Bootstrap 的 Grid System 做一個版面,比較難用文字描述,請見諒。

另外課程最後還有一些進階的 RWD 實作,例如設計 Grid 的思維、完全實現文字的縮放,純 CSS 實現表格的 RWD… 等等,這些在「廣州前端分享會」的簡報都可以看到唷。之後有時間會再整理成文章讓大家更瞭解其中的奧妙 😀

最後感謝各位的觀看,希望這篇文章可以幫助到各位唷。有任何問題,也歡迎在文章底下留言詢問~

☞ 延伸閱讀

如果對 Media Query 還不是很懂的話,建議可以看我在 2012 年寫的 CSS Media Queries 介紹與基礎應用

想對你說 (ノ>ω<)ノ

感謝您閱讀到最後,對文章有任何疑問歡迎留言給我,我會盡快回覆。

Faceook / 不定時分享前端資訊與新知,歡迎追蹤!

 

如果這篇文章對您有幫助,請幫我點擊下方的廣告,讓我有更多的動力寫寫寫 (๑•̀ㅂ•́)و✧

guest
0 則留言
Inline Feedbacks
View all comments
粉絲團