響應式布局
**查詢
*****===
@media screen and (-webkit-min-device-pixel-ratio: 0)
@media screen and (max-width: 767px){}寬度小於767px時使用
@media (min-width: 768px)
@media (max-device-width: 480px) and (orientation: landscape)max-device-width指的是裝置整個渲染區寬度（裝置的實際寬度）
@media all and (transform-3d), (-webkit-transform-3d)
ipads (portrait and landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px)
ipads (landscape)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : landscape)
ipads (portrait)
@media only screen and (min-device-width : 768px) and (max-device-width : 1024px) and (orientation : portrait)
iphone 4
@media only screen and (-webkit-min-device-pixel-ratio : 1.5),only screen and (min-device-pixel-ratio : 1.5)
@media screen and (min-width:1024px)
【screen是**型別 】
all
預設。適用於所有裝置。
aural
語音合成器。
braille
盲文反饋裝置。
handheld
手持裝置（小螢幕、有限的頻寬）。
projection
投影機。
列印預覽模式/列印頁。
screen
計算機螢幕。
tty
電傳打字機以及類似的使用等寬字元網格的媒介。
tv 電視型別裝置（低解析度、有限的滾屏能力）
【and是操作符】
and
邏輯與，連線裝置名與選擇條件、選擇條件1與選擇條件2。
not
排除某種裝置
, 裝置列表
only
限定某種裝置型別
【min-width是屬性值】
width
視覺螢幕/觸控裝置 接受最大最小值 定義輸出裝置中的頁面可見區域寬
度(單位一般為px)
heigth
視覺螢幕/觸控裝置 接受最大最小值 定義輸出裝置中的頁面可見區域高
度(單位一般為px)
device-width
視覺螢幕/觸控裝置 接受最大最小值 定義輸出裝置的螢幕可見寬度(單
位一般為px)
device-heigth
視覺螢幕/觸控裝置 接受最大最小值 定義輸出裝置的螢幕可見高度(單
位一般為px)
orientation
portrait |landscape
位圖介質型別 不接受最大最小值 定義』height』是否大於或等
於』width』。值portrait表是，landscape代表否即設，備手持方向：portait為橫向，landscape為豎向
aspect-ratio
位圖介質型別 接受最大最小值定義 』width』與』height』的比率，即
瀏覽器的長
寬比device-aspectratio 位圖介質型別 接受最大最小值 定義』device-width』與』device-
height』的比率，即裝置螢幕長寬比。如常見的顯示器比率：4/3， 16/9，16/10
color
視覺** 接受最大最小值 定義每一組輸出裝置的彩色原件個數。如
果不是彩色裝置，則值等於0
color-index
視覺** 接受最大最小值 定義在輸出裝置的彩色查詢表中的條目數。
如果沒有使用彩色查詢表，則值等於0
monochrome
視覺** 接受最大最小值 定義在乙個單色框架緩衝區中每畫素包含的
單色原件個數。如果不是單色裝置，則值等於0
resolution
位圖介質型別 接受最大最小值 定義裝置的解析度。如：96dpi，300dpi
，118dpcm
scan
progressive| interlace
電視類 不接受最大最小值 定義電視類裝置的掃瞄工序， progressive
逐行掃瞄，interlace隔行掃瞄
grid
柵格裝置 不接受最大最小值 用來查詢輸出裝置是否使用柵格或點陣。
只有1和0才是有效值，1代表是，0代表否
響應式布局 響應式布局技巧
一理解幾種布局的概念 1 靜態布局 static layout 即傳統web設計，對於pc設計乙個layout，在螢幕寬高有調整時，使用橫向和豎向的滾動條來查閱被遮掩部分 意思就是不管瀏覽器尺寸具體是多少，網頁布局就按照當時寫 的布局來布置 對於移動裝置，單獨設計乙個布局，使用不同的網域名稱如wap...
響應式布局
裝置高度 device width,device height 渲染視窗的寬高 width,height 裝置的手持方向 orientation 裝置的解析度 resolution 使用方法 用外聯或者內嵌樣式 或者兩者同時搭配使用。裝置高度 device width,device height 表...
響應式布局
首先，什麼是響應式布局呢？響應式布局是2010年5月提出的乙個概念，簡單地說就是乙個 能夠相容多個終端，而不是為每個終端做乙個特定的版本。這個概念是為了解決移動網際網路瀏覽器而產生的，目的是為使用者提供更加舒適的介面以及良好的使用者體驗。優點 1.面對不同解析度裝置靈活性強 2.能夠方便的解決多裝置...