media響應式
1、什麼是多**查詢？
**查詢是指：通過查詢出訪問我們網頁的裝置的**型別，來決定使用何種樣式。
2、 作用—多**的解決問題是什麼？
**查詢的作用為：為了解決在不同**型別上，網頁的排版，顯示，樣式等問題
3、 語法—多**查詢的基本語法
@media not|only mediatype and (expressions)
關鍵字 **型別 **特徵 此**型別對應的**
4.、例項—多**查詢使用例項
@media screen and (max-width:700px)
}這句**表示，當**型別為電腦螢幕，平板，智慧型手機等型別，且最大寬度為700px時，讓字型變為30px大小，顏色變為紅色。【也可以只給出**型別】
5、主要**型別（all print screen speech）
6、not/only
not/only關鍵字
使用**查詢時，**型別前面可以加上 not/only關鍵字，含義如下
not:
not是用來排除掉某些特定的裝置的，比如 @media not print（非列印裝置）。
only:
用來定某種特別的**型別。對於支援media queries的移動裝置來說，如果存在only關鍵字，移動裝置的web瀏覽器會忽略only關鍵字並直接根據後面的表示式應用樣式檔案。對於不支援media queries的裝置但能夠讀取media type型別的web瀏覽器，遇到only關鍵字時會忽略這個樣式檔案。
**型別特徵
寫法： 以and與型別相連，多個特徵也以and相連】每個特徵都寫在括號中，類似於css屬性的鍵值對寫法】乙個括號裡面只寫乙個特徵】
例項@media screen and (max-width:700px)
}@media screen and (max-width:800px) and (min-width:700px)
}特徵列表
height 定義輸出裝置中的頁面可見區域高度。
min-height 定義輸出裝置中的頁面最小可見區域高度。
max-height 定義輸出裝置中的頁面最大可見區域高度。
width 定義輸出裝置中的頁面可見區域寬度。
min-width 定義輸出裝置中的頁面最小可見區域寬度。
max-width 定義輸出裝置中的頁面最大可見區域寬度。
max-device-width 定義輸出裝置的螢幕最大可見寬度。
min-device-width 定義輸出裝置的螢幕最小可見寬度。
max-device-height 定義輸出裝置的螢幕可見的最大高度。
min-device-height 定義輸出裝置的螢幕的最小可見高度。
resolution 定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
max-resolution 定義裝置的最大解析度。
min-resolution 定義裝置的最小解析度。
aspect-ratio 定義輸出裝置中的頁面可見區域寬度與高度的比率
device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的比率。
device-height 定義輸出裝置的螢幕可見高度。
device-width 定義輸出裝置的螢幕可見寬度。
max-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
min-aspect-ratio 定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
max-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
min-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最小比率。
media響應式布局模版
列印樣式 media print 手機等小螢幕手持裝置 media screen and min width 320px and max width 480px 平板之類的寬度 1024 以下裝置 media only screen and min width 321px and max width...
響應式布局 media詳解
語法 media 型別及功能 指定 查詢使用的 特性。這類似於css屬性，如 max width 960px。css3 說明 指定樣式表規則用於指定的 型別和查詢條件。ie8及以下只能實現css2中的部分，即只可以設定 型別。查詢可以被用在css中的 media和 import規則上，也可以被用在h...
響應式頁面 media介紹
使用 media 查詢，你可以針對不同的螢幕大小定義不同的樣式。media 可以針對不同的螢幕尺寸設定不同的樣式，特別是如果你需要設定設計響應式的頁面，media 是非常有用的。當你重置瀏覽器大小的過程中，頁面也會根據瀏覽器的寬度和高度重新渲染頁面，這對除錯來說是乙個極大的便利。media medi...