響應式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;
}
}
嘗試一下»