媒體查詢-全面學習

之前老是內心想，媒體查詢很簡單，幾個查詢而後給個單獨的樣式就ok了，但當實際解決其問題來的時候，彷佛下手有點艱難，因此今天特意來全面學習瞭解並記錄下。

首先，css2的媒體查詢與css3有區別的，我這裏表述彷佛有問題，css2應該叫媒介查詢，什麼是媒介查詢，好比：

1 <link rel="stylesheet"<span style="color: #ff0000;"> media="screen"</span> href="small.css" />

 

這裏的media="screen"就是查詢是電腦屏幕仍是打印機仍是電視機，媒介類型表以下：

 

當 當前媒介知足狀況時，就使用small.css，但若是不知足，這個link連接的http請求仍是存在的，也就是說瀏覽器仍然下載了small.css只不過沒有使用。（有圖有真相）

 

---

 

以上是css2的媒介查詢，僅供瞭解，由於彷佛對於一個知識點的學習非得對比起來看才記得深入，記得明白。

接下來講css3的媒體查詢（ie8不支持媒體查詢，每每咱們條件判斷添加respond.js）

PS:這行語句真有用

<meta name="viewport" content="width=device-width, initial-scale=1,user-scalable=no">

 

css3的媒體查詢語句是徹底寫在css樣式表中的，形如：

1 @media screen and (min-width:541px) and (max-width:720px){
2 html { font-size: 1400%;}
3 }

 

下面來介紹@media均可以接啥參數。這裏的media screen與css2媒介查詢同樣，判斷設備的。

經常使用：

width:瀏覽器可視寬度。

height:瀏覽器可視高度。

device-width:設備屏幕的寬度。

device-height:設備屏幕的高度。

device-pixel-ratio：屏幕像素比

orientation:檢測設備目前處於橫向仍是縱向狀態。

aspect-ratio:檢測瀏覽器可視寬度和高度的比例。(例如：aspect-ratio:16/9)

device-aspect-ratio:檢測設備的寬度和高度的比例。

color:檢測顏色的位數。（例如：min-color:32就會檢測設備是否擁有32位顏色）

color-index:檢查設備顏色索引表中的顏色，他的值不能是負數。

resolution:檢測屏幕或打印機的分辨率。(例如：min-resolution:300dpi或min-resolution:118dpcm)。

 

鏈接關鍵詞能夠是and, or ,not。

例如：

 1 /* 像素比爲1時，頭部顏色爲綠色 */
 2 .header { background:red;display:block;}或
 3 @media only screen and (-moz-min-device-pixel-ratio: 1),
 4 
 5 only screen and (-o-min-device-pixel-ratio: 1),
 6 
 7 only screen and (-webkit-min-device-pixel-ratio: 1),
 8 
 9 only screen and (min-device-pixel-ratio:1) {
10 .header{background:green;}
11 
12 }

 

寫法就是那樣子，具體的得多找實例，例如移動端頁面的字體確定不是寫死的啊，好比有不少標籤a，p，h1，等等，你不可能利用媒體查詢每一個都去再寫一遍吧，我以爲媒體查詢得結合單位來使用，好比em單位，rem單位，還須要不斷的學習，今天只是整理，參考資料會在下面列出，仍是頗有幫助的。

css3媒體查詢：

使用 CSS 媒體查詢建立響應式網站

CSS3 Media Queries

css3媒體查詢實現網站響應式佈局

css3 media媒體查詢器用法總結

CSS媒體查詢

rem，em單位：

CSS3的REM設置字體大小

另外附上一張頗有意義的em參考表

若是你以爲本文對你有幫助就點個贊吧！

 本文出自個人博客：媒體查詢-全面學習