css中@規則是由@符號開始的，例如@import，@page等。
@media就是其中的乙個規則。
@media可以讓你根據不同的螢幕大小而使用不同的樣式，這可以使得不需要js**就能實現響應式布局。
不過@media只能用於較新的瀏覽器，對於老式的ie，不支援。下面是@media支援的瀏覽器。
@media的語法比較簡單，一眼就能看懂。
@media mediatype and|not|only(media feature)
可以參考值的說明。
其中mediatype就是**型別，可以包括好多種，最常用的就是screen，其他多數已經作廢。
media feature就定義了這個media裝置的一些特徵，簡單的說就是**滿足什麼條件，常用的就是max-width，min-width。
通過指定螢幕的大小，而採用不同的樣式。
舉個例子演示如何用@media規則實現響應式布局。
-----------------------------------------
@media only screen and (min- 620px) and (max-width: 930px)
@media only screen and (max- 620px)上述2個規則，當螢幕寬度在620px以下，和620px-930px，使用的contain樣式是不同的。
截圖：
當瀏覽器寬度在1024px的情況下，顯示效果如下：
當瀏覽器寬度在680px的情況下，顯示如下：
當瀏覽器寬度在480px的情況下，顯示如下：
CSS3中的media查詢
這幾天，在看慕課網的css3，寫得很詳細，位址在這 做一下筆記 1 css3中的10種 查詢型別 值 裝置型別 all 所有裝置 需要熟悉的 screen 螢幕顯示器 需要熟悉的 print 列印用紙或列印預覽檢視 需要熟悉的 braille 盲人用點字法觸覺回饋裝置 embossed 盲文印表機 ...
link標籤的media屬性的用法
media screen media屬性規定被鏈結文件將顯示在什麼裝置上，為不同的 型別規定不同的樣式 屬性值 screen 預設 計算機螢幕。tty 電傳打字機以及類似的使用等寬字元網格的 projection 放映機。handheld 手持裝置 小螢幕 有限頻寬 print 印表機 braill...
Style 中的 Media 屬性
media 指定這個css用於何種裝置。具體引數如下 screen 預設值 提交到計算機螢幕 print，輸出到印表機 projection，提交到投影機 aural，揚聲器 braille，提交到凸字觸覺感知裝置 tty，電傳打字機 使用固定的字型 tv，電視機 all，所有輸出裝置 media屬...