media query即**查詢,是響應式布局不可獲缺的一部分。
css3中的media query增加了更多的**查詢，這樣在css3中我們可以在不改變頁面表達內容的情況下，新增各種表示式來設定不同型別的**條件，來調整頁面布局來適應各種不同裝置。
media query有兩種設定方式：
1.直接在link中判斷裝置尺寸，引用不同的css來渲染當前頁面。
<表示當螢幕最大寬度即小於或者等於640px時，會呼叫stylea.css來渲染頁面。link
rel='stylesheet'
media
='screen
and (max-width:640px)' href
= 'stylea.css'
/>
media有十種屬性值：
and是關鍵字，其關鍵字還包括not(排除某種裝置)，only(限定某種裝置)
max-width:640px 即**特性。
<當螢幕寬度大於320px小於640px時，會呼叫styleb.css來渲染頁面。link
rel="stylesheet"
media
="screen and (min-width:320px) and (max-width:640px)"
href
="styleb.css"
/>
2.寫在css樣式表中。
@media screen and (min-width:640px) }和link裡寫法基本相同，先判斷裝置，引用對應的樣式檔案覆蓋，渲染頁面。
ps：由於網頁會根據螢幕寬度來調整布局，所以不能使用絕對寬度來布局。
media-device-width:整個裝置顯示區域的寬度，即真實的裝置寬度。
max-width:目標顯示器的寬度，即瀏覽器顯示寬度。
若使用max-device-width，在pc端瀏覽器上瀏覽網頁時，縮小或者放大瀏覽器是不會執行css的，因為pc裝置寬度未發生變化。
若使用max-width，縮小或者放大瀏覽器網頁時執行css，因為顯示區域，瀏覽器大小改變。
如果使用max-device-width時，當手機由橫變豎時，css不執行。因為手機寬度未改變。
所以通常在面向移動裝置時，使用max-device-width。pc裝置使用max-width。
css3 media 響應式布局的簡單例項
響應式布局可以為不同終端的使用者提供更加舒適的介面和更好的使用者體驗，而且隨著目前大螢幕移動裝置的普及，用 大勢所趨 來形容也不為過。隨著越來越多的設計師採用這個技術，我們不僅看到很多的創新，還看到了一些成形的模式。隨著技術的發展css3的特性也被廣泛應用開來，它的很多新標籤也非常好用而且非常容易學...
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...