語法：
@media：
：[[',' ]*]?
：'('[:]?')'
**型別及功能：
：指定**查詢使用的**特性。這類似於css屬性，如：max-width:960px。(css3)
說明：
指定樣式表規則用於指定的**型別和查詢條件。
ie8及以下只能實現css2中的部分，即只可以設定**型別。
**查詢可以被用在css中的@media和@import規則上，也可以被用在html和xml中。
事例**：
@media screen and (width:800px)
@import url(example.css) screen and (width:800px);
<?xml-stylesheet media="screen and (width:800px)" rel="stylesheet" href="example.css" ?>
幾種使用方式：
@media all and (width:1024px)
@media all and (device-height:800px)
2.@media all and (orientation:landscape)
3.@media all and (device-aspect-ratio:16/10)
4.@media all and (min-color:1)
5.@media all and (monochrome:0)
6.@media all and (grid:0)
@media screen and這是一種最常見的寫法，後面跟上限定的螢幕尺寸
帶all 跟 only的寫法
一般all跟only都是對應在一起出現的
@media all and (min-width:***) and (max-width:***)
@media only screen and (min-width:***) and (max-width:***)
**型別：
all 用於所有裝置
aural 已廢棄。用於語音和聲音合成器
braille 已廢棄。 應用於盲文觸控式反饋裝置
embossed 已廢棄。 用於列印的盲人印刷裝置
handheld 已廢棄。 用於掌上裝置或更小的裝置，如pda和小型**
print 用於印表機和列印預覽
projection 已廢棄。 用於投影裝置
screen 用於電腦螢幕，平板電腦，智慧型手機等。
speech 應用於螢幕閱讀器等發聲裝置
tty 已廢棄。 用於固定的字元網格，如電報、終端裝置和對字元有限制的便攜裝置
tv 已廢棄。 用於電視和網路電視
**功能：
aspect-ratio 定義輸出裝置中的頁面可見區域寬度與高度的比率
color 定義輸出裝置每一組彩色原件的個數。如果不是彩色裝置，則值等於0
color-index 定義在輸出裝置的彩色查詢表中的條目數。如果沒有使用彩色查詢表，則值等於0
device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的比率。
device-height 定義輸出裝置的螢幕可見高度。
device-width 定義輸出裝置的螢幕可見寬度。
grid 用來查詢輸出裝置是否使用柵格或點陣。
height 定義輸出裝置中的頁面可見區域高度。
max-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-color 定義輸出裝置每一組彩色原件的最大個數。
max-color-index 定義在輸出裝置的彩色查詢表中的最大條目數。
max-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最大比率。
max-device-height 定義輸出裝置的螢幕可見的最大高度。
max-device-width 定義輸出裝置的螢幕最大可見寬度。
max-height 定義輸出裝置中的頁面最大可見區域高度。
max-monochrome 定義在乙個單色框架緩衝區中每畫素包含的最大單色原件個數。
max-resolution 定義裝置的最大解析度。
max-width 定義輸出裝置中的頁面最大可見區域寬度。
min-aspect-ratio 定義輸出裝置中的頁面可見區域寬度與高度的最小比率。
min-color 定義輸出裝置每一組彩色原件的最小個數。
min-color-index 定義在輸出裝置的彩色查詢表中的最小條目數。
min-device-aspect-ratio 定義輸出裝置的螢幕可見寬度與高度的最小比率。
min-device-width 定義輸出裝置的螢幕最小可見寬度。
min-device-height 定義輸出裝置的螢幕的最小可見高度。
min-height 定義輸出裝置中的頁面最小可見區域高度。
min-monochrome 定義在乙個單色框架緩衝區中每畫素包含的最小單色原件個數
min-resolution 定義裝置的最小解析度。
min-width 定義輸出裝置中的頁面最小可見區域寬度。
monochrome 定義在乙個單色框架緩衝區中每畫素包含的單色原件個數。如果不是單色裝置，則值等於0
orientation 定義輸出裝置中的頁面可見區域高度是否大於或等於寬度。
resolution 定義裝置的解析度。如：96dpi, 300dpi, 118dpcm
scan 定義電視類裝置的掃瞄工序。
width 定義輸出裝置中的頁面可見區域寬度。
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樣式分為 內聯式css樣式 嵌入式css樣式 外部式css樣...
讓IE支援 media 響應式布局
如今的螢幕解析度，小至320px iphone 大到2560px甚至更高 大顯示器 變化範圍極大。除了使用傳統的台式電腦，使用者會越來越多的通過手機 上網本 ipad一類的平板裝置來瀏覽頁面。這種情況下，固定寬度的設計方案將會顯得越發不合理。頁面需要有更好的適應性，其布局結構要做到根據不同的裝置及螢...