編程教程響應式 Web 設計 – 媒體查詢
響應式 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 列：
<divclass="row">
<divclass="col-3 col-m-3">...</div>
<divclass="col-6 col-m-9">...</div>
<divclass="col-3 col-m-12">...</div>
</div>
<divclass="col-3 col-m-3">...</div>
<divclass="col-6 col-m-9">...</div>
<divclass="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;}}