響應式 Web 設計 – 媒體查詢
媒體(media)查詢在 CSS3 上有介紹:CSS3 @media 查詢。
使用 @media 查詢,你可以針對不同的媒體型別定義不同的樣式。
例項
如果瀏覽器視窗小於 500px, 背景將變為淺藍色:
@media only screen and (max-width: 500px) {
body {
background-color: lightblue;
}
}
body {
background-color: lightblue;
}
}
新增斷點
在先前的教程中我們使用行和列來製作網頁,它是響應式的,但在小螢幕上並不能友好的展示。
媒體查詢可以幫我們解決這個問題。我們可以在設計稿的中間新增斷點,不同的斷點有不同的效果。
桌面裝置

手機裝置

使用媒體查詢在 768px 新增斷點:
例項
當螢幕 (瀏覽器視窗) 小於 768px, 每一列的寬度是 100%:
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
@media only screen and (max-width: 768px) {
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
}
為移動端優先設計
移動端優先意味著在設計桌面和其他裝置時優先考慮移動端的設計。
這就意味著我們必須對 CSS 做一些改變。
我們在螢幕小於 768px 進行樣式修改,同樣在螢幕寬度大於 768px 時也需要修改樣式。以下是移動端優先例項:
/* 為移動端設計: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
其他斷點
你可以根據自己的需要新增斷點。
我們同樣可以為平板裝置和移動手機裝置設定斷點。
桌面裝置

平板裝置

手機裝置

在螢幕為 600px 時新增媒體查詢,並設定新的樣式(螢幕大於600px但小於768px):
例項
注意兩組類樣式是相同的,但名稱不同 (col- 和 col-m-):
/* For mobile phones: */
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
[class*="col-"] {
width: 100%;
}
@media only screen and (min-width: 600px) {
/* For tablets: */
.col-m-1 {width: 8.33%;}
.col-m-2 {width: 16.66%;}
.col-m-3 {width: 25%;}
.col-m-4 {width: 33.33%;}
.col-m-5 {width: 41.66%;}
.col-m-6 {width: 50%;}
.col-m-7 {width: 58.33%;}
.col-m-8 {width: 66.66%;}
.col-m-9 {width: 75%;}
.col-m-10 {width: 83.33%;}
.col-m-11 {width: 91.66%;}
.col-m-12 {width: 100%;}
}
@media only screen and (min-width: 768px) {
/* For desktop: */
.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 75%;}
.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}
}
以上程式碼看起來很多餘,但是他可以根據螢幕大小自動設定不同的樣式,所以還是非常必要的。
HTML 例項
針對桌面裝置:
第一和第三部分跨越 3 列。中間部分跨域 6 列。
針對平板裝置:
第一跨域 3列,第二部分跨越 9 列,第三部分跨域 12 列:
<div class="row">
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
<div class="col-3 col-m-3">...</div>
<div class="col-6 col-m-9">...</div>
<div class="col-3 col-m-12">...</div>
</div>
方向:橫屏/豎屏
結合CSS媒體查詢,可以建立適應不同裝置的方向(橫屏landscape、豎屏portrait等)的佈局。
語法:
orientation:portrait | landscape
- portrait:指定輸出裝置中的頁面可見區域高度大於或等於寬度
- landscape: 除portrait值情況外,都是landscape
例項
如果是橫屏背景將是淺藍色:
@media only screen and (orientation:
landscape) {
body {
background-color: lightblue;
}
}
body {
background-color: lightblue;
}
}