iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 6
1

常常聽到響應式網頁,但是怎麼做呢?

響應式設計(Responsive web design)指的是使網頁內容在不同裝置下,都可以呈現出適切的內容。在說明如何設定以前,我們來看一個小小的例子瞭解 RWD。(此例來自:Bootstrap 优站精选 中的 Azul 網站)

先看 header 的部分:

header

我們可以觀察到它隨著寬度變小後,它的選項變爲漢堡選單,以及文字內容自動換行。接著我們看看網站內容的 RWD 變化。

main

我們可以觀察到中央三個區塊內容,隨著寬度縮小,之間的間距變小,到一定程度後,由橫向排列變動爲縱向排列。

那麼我們要怎麽做到讓網頁能夠自適應呢?依靠的是兩件事:CSS3 所提供的媒體查詢功能及 viewport 的設定。

媒體查詢功能

透過媒體查詢功能,我們可以得知用戶裝置的相關資訊,就可以進一步針對裝置套用合適的 CSS 。那麼媒體查詢功能可以查詢什麼資訊呢?

1.width:視區寬度
2.height:視區高度
3.device-width:裝置寬度
4.device-height:裝置高度
5.orientation:裝置寬高比
6.aspect-ratio:視區寬高比
7.其他還可以查詢 color 、 hover等,更多詳細內容可以查詢 W3Schools

一般我們會以視區寬度爲主,因爲視區才是真正代表目前瀏覽器渲染的範圍。在 RWD 中我們最常使用媒體查詢功能得知視區寬度,我們可以透過滾輪往下閱讀內容,但我們不會希望使用者要使用滾輪往右閱讀內容,也就是網頁內容的寬度不能超過使用者視區寬度。

Media Types (根據 W3Schools)

1.all:所有裝置
2.print:印表機列印輸出
3.screen:一般電腦螢幕
4.speech:朗讀式裝置

如何撰寫媒體查詢

撰寫媒體查詢會伴隨條件語法,包含 only、and、not。only 表示指定特定單一條件,and 表示多個條件都必須符合, not 表示不要某一個條件。這三種條件判斷可以同時存在,中間使用,隔開即可。而當中我們最常使用的是 and,我們來看看 and 的寫法:

.pic{
  width: 300px;
}
@media screen and (min-width:900px) { 
  .pic{
    width: 500px;
  }
}

在這個範例中 .pic 原寬度爲 300px,當我的裝置是螢幕且寬度至少有 900px 時,也就是大於等於 900px 時,.pic寬度變更爲 500px。

viewport 設定

要讓媒體查詢功能能夠體現,我們必須要設定 viewport ,我們常常看到以下這一行程式碼:<meta name="viewport" content="width=device-width, initial-scale=1.0"> ,這一行程式碼做了什麼事情呢?這一行 meta 標籤需放置於 HTML head 當中,name="viewport" 表示我們現在要設置的是 viewport,內容爲 width=device-width, initial-scale=1.0width=device-width 代表我的渲染寬度等於裝置寬度,initial-scale=1.0 設定螢幕畫面的初始縮放比例為 100%。若要讓使用者完全不能縮放可以加上 user-scalable=no

接著我們用一個小小的範例,來學習一下如何設定,我們要達到的效果爲隨著寬度拉大至 500px 時,盒子寬度變寬至 500px 並且變爲綠色,寬度繼續拉大至 1000px 時,盒子寬度變寬至 1000px 並且變爲藍色。只要寫好媒體條件,當條件符合時,就會執行包裹於其中的程式碼。
程式碼如下:

 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;
 }
}

效果如下:

rwdsmaple

一開始定義 RWD 的斷點時,我會使用常見裝置尺寸來當做斷點,但後來我更喜歡 "HTML5 與 CSS3 響應式網頁設計第二版" 一書的解釋,它說:「請讓內容和設計決定切合的分斷點在哪裡。」如果我們針對特定尺寸撰寫 RWD,那麼其實也是變相的寫死了網頁尺寸。好的 RWD 設定,應該如它的定義「使網頁內容能夠在不同裝置下,都可以呈現出適切的內容」。

另一個起初撰寫 RWD 時,可能會有的疑惑是,我應該集中撰寫我的 RWD 還是直接撰寫在個別選擇器底下,兩種寫法各有優缺點及支持者,但以維護及撰寫效率的角度來說,我會選擇後者。當我在撰寫某一個區塊時,我會一邊想好它的 RWD 變化,在個別選擇器底下直接寫進去,且當我後續想要修改RWD 變化時,我也可以很快的找到。而因應上一段所述「請讓內容和設計決定切合的分斷點在哪裡。」不同區塊的設計可能也會有不一樣的斷點,因此我選擇後者,供參考。

參考資料: (書籍) HTML5 與 CSS3 響應式網頁設計第二版


上一篇
Day5 來切一個一定會有的 header 吧
下一篇
Day7 利用純 HTML / CSS 來一個好吃的手作漢堡
系列文
前端之 " wow~原來是這樣啊 "30

尚未有邦友留言

立即登入留言