@media **查詢選擇性載入css，意思是自動探測螢幕寬度，然後載入相應的css檔案。可以針對不同的螢幕尺寸設定不同的樣式，特別是需要設定設計響應式的頁面，@media 是個不錯的選擇
用法：@media 裝置型別 and (裝置特性-寬度) //裝置型別有很多 這是screen是顯示器的意思
@media screen and (min-width:1200px)@media screen and (min-width: 960px) and (max-width:1199px) @media screen and (min-width: 768px) and (max-width:959px) @media screen and (min-width: 640px) and (max-width:767px) @media screen and (min-width: 480px) and (max-width:639px) @media screen and (min-width: 320px) and (max-width:479px) @media screen and (min-width: 240px) and (max-width:319px) @media screen and (max-width:239px)
注意：單獨使用min和max時使用順序的 從上往下， min-width 從小到大 ，max-width 從大到小
rem是根據網頁根元素的字型大小來定義的若此時html 那麼在頁面中1rem就表示14px
在pc端使用rem的一些弊端：
相容性，pc端相容性要求還是挺高的
計算，rem作為單位需要進行簡單的計算的
pc端瀏覽器大小是會變化的，每次變化都需要重新設定跟字型的大小
pc端字型不能跟隨瀏覽器大小來定（谷歌對最小字型大小是有限制的），而且pc端自適應主要是寬度吧，rem自適應是所有的，
我自己在使用還受到行高的影響，很是無奈啊
通常在使用rem時要結合js來動態設定根元素的字型大小
// 繫結到視窗的這個事件中
window.onresize(function ());
(jquery: $(window).resize(function()); )
//為什麼要*100？ 意思是設定根元素字型預設為100px，因為眾多瀏覽器預設字型大小是不確定，谷歌12px一下預設為12px 這裡設定為100，避免在各個瀏覽器出現樣式錯亂問題 在使用時
若設計圖的尺寸是200px使用rem 寫為2rem就可以了
media 實現網頁自適應
media 其實就是判斷螢幕多大的解析度 然後選用什麼 css樣式 media screen and min width 413px 例子就是這樣的 min 相當於 這個符號 max 相當於 這個符號 多個 判斷 區間 用 and相連 media screen and min width 413px...
使用CSS3的 media來實現網頁自適應
如今，電腦顯示器的螢幕解析度向越來越大發展，而手機等移動裝置終端的解析度卻不可能大到 去。越來越多的 開始讓自己的頁面自適合各種解析度，在小解析度下顯示基本的內容，在大解析度下顯示全部功能，甚至是分多等級的多版本。作為web前端開發人員需要知道並且會用這種知識。css2裡面雖然支援 media屬性，...
自適應網頁選擇載入CSS
自適應網頁設計 的核心，就是css3引入的media query模組。它的意思就是，自動探測螢幕寬度，然後載入相應的css檔案。media screen and max device width 400px href tinyscreen.css 上面的 意思是，如果螢幕寬度小於400畫素 max ...