響應式設計與 media queries

RWD 系列文章 》

除了 viewport 與圖片設定,響應式設計最關鍵的部份,莫過於版面區塊的配置,而這必須透過導入媒體查詢樣式進行處理。延續前一篇文章的說明,儘管透過圖片的樣式設計可以達到彈性縮放的效果,然而當螢幕寬度縮減到一定的尺寸以下,如此的配置便不容易檢視,要解決這樣的問題必須讓網頁的內容自動判斷螢幕寬度再重新配置,可以透過 media queries 設定進行處理。考慮前述的範例,其中用以配置圖片的 div 標籤,CSS設定如下:

#spic > div
{
float:left
width:31.3%;
padding:1%;
    text-align:center;                      
}

這段 CSS 讓畫面下方的導覽示意圖片可以橫向呈列,並且適度的縮放。但我們希望在較小的螢幕上,圖片能垂直排列,並且置中填滿橫向空間,因此必須移除其中的float樣式,並且將 width 樣式放大至 90% ,以期能在小型的螢幕上適當呈現。現在準備兩個 css 檔案,分別命名為 sl.css 與 ss.css ,列舉如下:
sl.css
#spic > div
{
float:left
width:31.3%;
padding:1%;
    text-align:center;                      
}
ss.css
#spic > div
{
width:90%;
padding:1%;
    text-align:center;                      
}

將其配置於專案中的 css 資料夾,切換至所要套用的網頁,完成以下兩行設定:

<link href="css/sl.css" rel="stylesheet"  />
media="only screen and (min-width:601px)"
<link href="css/ss.css" rel="stylesheet"
media="only screen and (max-width:600px)"/>

首先是一般的設定,預設會以第一行的sl.css樣式為標準進行套用,根據使用者螢幕大小縮放所有的圖片,其中的 media 設定導致這組樣式只有在螢幕寬度大於 600px 時會被套用。第二行的 media 設定則要求當螢幕寬度等於或是小於 600px 寬度時,套用此樣式。

完成上述的設定之後,網頁會有兩個版本,並且以600px螢幕寬度為依據,大於這個寬度的螢幕套用 sl.css 這一組樣式,反之則套用 ss.css 這一組樣式。以下為瀏覽效果,左圖為一般大於 600px 的螢幕尺寸,右邊則是小尺寸螢幕的效果。



RWD 系列文章 》


沒有留言: