響應式布局是為了實現網頁頁面適應各種裝置螢幕，如手機印表機等各個不同的終端。
**查詢模組
**查詢（media queries）查詢主要包括兩個重要的內容：**型別和**特性；
**型別
**指定的值
型別描述
all所有的**裝置
screen
顯示器、手機、平板等裝置
印表機或者列印預覽檢視
speech
螢幕閱讀器等發聲裝置
handheld
如pad和小型**等掌上裝置或者更小的裝置
tv電視機型別裝置
projection
投影裝置
embossed
盲文印表機
braille
盲文觸控式反饋裝置
tty用於固定的字元網格，如電報，終端裝置等
常用的是前面三個（all、screen、print），後面的型別在w3c中已經被廢棄。
**特性
在css3中**特性於css屬性類似，但於css屬性不同的是，美特特性使用min/max來對大於等於或小於進行邏輯判斷
**特性的屬性
描述width和height
瀏覽器視窗的高和寬
device-width和device-height
輸出裝置的寬和高
orientation
瀏覽器視窗方向（縱向：portrait、橫向：landscape）
resolution
裝置的解析度
aspect-ratio
瀏覽器視窗寬度與高度的比率
device-aspect-ratio
輸出裝置螢幕的可見寬度與高度的比率
color
輸出裝置的顏色值，非彩色裝置，則為0
color-index
輸出裝置的彩色查詢表中的色彩數，沒有查詢表，則為0
monochrome
乙個單色幀緩衝區中每畫素包含的位元組數，非單色裝置，則為0
scan
電視類裝置的掃瞄方式，逐行掃瞄：progressive，隔行掃瞄：interiace
grid
用於查詢輸出裝置是否使用柵格或點陣，基於柵格時值為1，否則為0
media queries 的引用方法
（1）使用link方法引用樣式
rel=
"stylesheet"
type
="text/css"
href
="mystyle.css"
media
="sccreen"
/>
rel=
"stylesheet"
type
="text/css"
href
="mystyle.css"
media
="sccreen and (max-width:1200px)"
/>
>
type
="text/css"
>
@importurl
(mystyle.css) screen and (
max-width
:900px)
;
style
>
head
>
>
@media **型別 and (**特性)
style
>
（1）最大寬度：max-width
@media screen and (
max-width
:480px)
}/* 當螢幕的寬度小於等於480px時，頁面中ads這個類隱藏*/
@media screen and (
min-width
:900px)
}/*當螢幕寬度大於等於900px時，頁面中ads類的寬度為900px*/
@media screen and (
min-width
:600px) and (
max-width
:1200px)
}/* 當螢幕的寬度大於600px小於1200px時，頁面中ads類的背景顏色為#f90 */
rel=
"stylesheet"
media
="screen and (nax-device-width:500px)"
href
="mystyle.css"
/>
@media not print and (
min-width
:1200px)
/* 樣式**適用於除列印裝置和寬度大於1200px的所有裝置上 */
rel=
"stylesheet"
media
="only screen and (max-device-width:300px)"
href
="mystyle.css"
/>
lang
="en"
>
>
charset
="utf-8"
>
>
titletitle
>
head
>
>
/* 通用樣式 */
*/* 正常顯示樣式 */
header,
main,
footer
header
.left,.main,.right
footer
/* 響應樣式 寬度大於等於960px */
@media screen and (
min-width
: 960px)
.left,.main,.right
.left,.right
.main
main
}/* 響應樣式 寬度大於等於600px 小於等於960px */
@media screen and (
min-width
: 600px) and (
max-width
: 960px)
.left,.main
.right
.left
.main
main
}/* 響應樣式 寬度小於等於600px */
@media screen and (
max-width
: 600px)
.left,.right
.main
.right
main
}style
>
>
>
headerheader
>
>
class
="left"
>
leftdiv
>
class
="main"
>
maindiv
>
class
="right"
>
rightdiv
>
main
>
>
footerfooter
>
body
>
html
>
響應式布局一
所謂響應式布局就是針對不同解析度的裝置，可以呈現出不同的布局效果。如乙個 在pc上呈現一種布局效果，在pad上呈現的是一種布局效果，而在手機上所呈現的又是另一種布局效果。這種不同分別率裝置上呈現不同效果的布局方式就是響應式布局。css3為響應式布局提供了良好的支援，下面通過乙個簡單的例子來簡單學習一...
響應式布局（一）
meta name viewport content width device width,initial scale 1,maximum scale 1,user scalable no user scalable no 屬性能夠解決 ipad 切換橫屏之後觸控才能回到具體尺寸的問題 假如乙個終端...
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...