標籤:min 使用 image 設定 ini 代碼實現 查詢 nbsp 顯示
1、什麼是媒體查詢
媒體查詢可以讓我們根據裝置顯示器的特性(如視口寬度、螢幕比例、裝置方向:橫向或縱向)為其設定CSS樣式,媒體查詢由媒體類型和一個或多個檢測媒體特性的條件運算式組成。媒體查詢中可用於檢測的媒體特性有 width 、 height 和 color (等)。使用媒體查詢,可以在不改變頁面內容的情況下,為特定的一些輸出裝置定製顯示效果。
2、為什麼響應式設計需要,媒體查詢
如果沒有CSS3的媒體查詢模組,就不能針對裝置特性(如視口寬度)設定特定的CSS樣式
3、如何在CSS檔案中引入媒體查詢
媒體查詢寫在CSS樣式代碼的最後,CSS是層疊樣式表,在同一特殊性下,靠後的的樣式會重疊前面的樣式
4、怎樣使用media
準備工作1:設定Meta標籤
首先我們在使用Media的時候需要先設定下面這段代碼,來相容行動裝置的展示效果:
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
這段代碼的幾個參數解釋:
width = device-width:寬度等於當前裝置的寬度
initial-scale:初始的縮放比例(預設設定為1.0)
minimum-scale:允許使用者縮放到的最小比例(預設設定為1.0)
maximum-scale:允許使用者縮放到的最大比例(預設設定為1.0)
user-scalable:使用者是否可以手動縮放(預設設定為no,因為我們不希望使用者放大縮小頁面)
準備工作2:載入相容檔案JS
因為IE8既不支援HTML5也不支援CSS3 Media,所以我們需要載入兩個JS檔案,來保證我們的代碼實現相容效果:
- <!--[if lt IE 9]>
- <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
- <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
- <![endif]-->
準備工作3:設定IE渲染方式預設為最高(這部分可以選擇添加也可以不添加)
現在有很多人的IE瀏覽器都升級到IE9以上了,所以這個時候就有又很多詭異的事情發生了,例如現在是IE9的瀏覽器,但是瀏覽器的文檔模式卻是IE8:
為了防止這種情況,我們需要下面這段代碼來讓IE的文檔模式永遠都是最新的:
- <meta http-equiv="X-UA-Compatible" content="IE=edge">
- <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
這段代碼後面加了一個chrome=1,這個Google Chrome Frame(Google內嵌瀏覽器架構GCF),如果有的使用者電腦裡面裝了這個chrome的外掛程式,就可以讓電腦裡面的IE不管是哪個版本的都可以使用Webkit引擎及V8引擎進行排版及運算,無比給力,不過如果使用者沒裝這個外掛程式,那這段代碼就會讓IE以最高的文檔模式展現效果。這段代碼我還是建議你們用上,不過不用也是可以的。
二、怎樣在CSS檔案中寫CSS響應式媒體查詢
例: 根據不同寬度樣式改變
HTML:
<ul><li>John Doe</li><li>Mary Moe</li><li>Amanda Panda</li></ul>
CSS:
//寬度小於500像素@media screen and (max-width:500px) { ul>li { background: blue; color: #fff; font-size: 12px; }}
//寬度在500-700像素@media screen and (max-width:700px) and (min-width:501px) { ul>li { background: goldenrod; color: #000; font-size: 16px; }}
//寬度在700-1000像素@media screen and (max-width:1000px) and (min-width:701px) { ul>li { background: plum; color: #000; font-size: 20px; }}
//寬度大於1000像素@media screen and (min-width:1001px) { ul>li { background: violet; color: #333; font-size: 22px; }}//樣式結束
In a word, @media 有三大要點: 1,meta 標籤;2,相容IE;3,@media screen and (max-width:980px){} (樣本樣式)
CSS3媒體查詢總結