媒體查詢
媒體查詢是響應式布局中非常常用的一種手段，在學習媒體查詢之前要先了解什么是響應式。
所謂響應式即在不同尺寸屏幕設備上響應的內容不同
相信在之前你寫的頁面在PC端看非常華麗工整，但是一拿到移動端全部亂了套，這就是因為沒有對頁面做響應式處理。
Media Queries能在不同的條件下使用不同的樣式，使頁面在不同在終端設備下達到不同的渲染效果。
媒體類型
| 選項 | 說明 |
|---|---|
| all | 所有媒體類型 |
| screen | 用於電腦屏幕，平板電腦，智能手機等 |
| 打印設備 | |
| speech | 應用於屏幕閱讀器等發聲設備 |
另外還有很多設備類型，如tty, tv, projection, handheld, braille, embossed, aural 等等，但是這些類型已經被廢棄。
可以使用 link 與 style 中定義媒體查詢
也可以使用
@import url(screen.css) screen形式媒體使用的樣式可以用逗號分隔同時支持多個媒體設備
未指定媒體設備時等同於all
style
下面我們來感受一下在screen屏幕設備與print打印設備上同一個元素給出的不同響應。
在screen上響應出紅色，而在print上響應出綠色。
我們平時用的
style並未指定media，此時默認為all，即所有媒體設備。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style media="screen"> h1{ color: red; } </style><style media="print"> h1{ color: green; } </style> </head> <body> <h1> 屏幕設備上顯示紅色打印設備上顯示綠色 </h1> </body> </html>
link
在 link 標簽中通過 media 屬性可以設置樣式使用的媒體設備。
common.css沒有指定媒體所以全局應用
screen.css應用在屏幕設備
print.css應用在打印設備我們平時用的
link並未指定media，此時默認為all，即所有媒體設備。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <link rel="stylesheet" href="./screen.css" media="screen" type="text/css"> <link rel="stylesheet" href="./print.css" media="print" type="text/css"> </head> <body> <h1> 屏幕設備上顯示紅色打印設備上顯示綠色 </h1> </body> </html>
@import
使用@import 可以引入指定設備的樣式規則。文件中引入一個樣式文件，在這個文件中再引入其他媒體的樣式文件。
/* 引入全局的CSS樣式 */ <link rel="stylesheet" href="style.css">
/* 在全局的CSS樣式中分別導入不同設備的CSS樣式 */
@import url(screen.css) screen;
@import url(print.css) print;
@media
可以使用 @media 做到更細的控制，即在一個樣式表中為多個媒體設備定義樣式。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @media screen { /* 屏幕設備 */ h1{ color: red; } } @media print{ /* 打印設備 */ h1{ color: green; } } </style> </head> <body> <h1> 屏幕設備上顯示紅色打印設備上顯示綠色 </h1></body> </html>
多媒體支持
前面已經說過，如果沒有進行限制media則默認是all，all代表全部，如果我們只想讓一部分媒體設備應用樣式，則可以使用逗號將它們分開。
@import url(screen.css) screen,print; <link rel="stylesheet" href="screen.css" media="screen,print"> @media screen,print {...}
查詢條件
可以使用不同條件限制使用的樣式
注意：條件表達式需要放在擴號中
邏輯與
需要滿足多個條件時才使用樣式，多個條件使用and 連接。下例中滿足以下要求才使用樣式。
-
-
橫屏顯示
-
寬度不能超過768px
-
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @media screen and (orientation: landscape) and (max-width: 768px){ /* 屏幕設備 必須是寬屏 寬度小於768px */ h1{ color: red; } } </style> </head> <body> <h1> 必須是屏幕設備並且寬度小於768px </h1></body> </html>
邏輯或
多個或 條件查詢使用,逗號連接，不像其他程序中使用 or 語法。
下面的示例中如果設備是橫屏顯示或寬度不超768px時就使用樣式規則。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @media screen and (orientation: landscape) , screen and (max-width: 768px){ /* 屏幕設備 必須是橫屏 寬度小於768px */ h1{ color: red; } } </style> </head> <body> <h1> 必須是屏幕設備並且是橫屏顯示 或者是屏幕設備並且寬度小於768px </h1></body> </html>
邏輯非
not 表示不應用樣式，即所有條件都滿足時不應用樣式。
必須將
not寫在查詢的最前面
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <style> @media not screen{ h1{ color: red; } } </style> </head> <body> <h1> 如果是屏幕設備則不應用 反之 如果是不是屏幕設備則應用 </h1> </body> </html>
only
用來排除不支持媒體查詢的瀏覽器。
對支持媒體查詢的設備，正常調用樣式，此時就當only不存在
對不支持媒體查詢的設備不使用樣式
only和not一樣只能出現在媒體查詢的開始
/* 必須支持媒體查詢 必須是屏幕設備並且是橫屏顯示還有最小寬度為768px */
@media only screen and (orientation: landscape) and (max-width: 768px) {
...
}
查詢特性
根據查詢特性篩選出使用樣式的設備。
常用特性
下面列出常用的媒體查詢特性
| 特性 | 說明 |
|---|---|
| orientation: landscape | portrait | landscape橫屏，portrait豎屏 |
| width | 設備寬度 |
| height | 設備高度 |
| min-width | 最小寬度（可以理解為大於該數值即成立） |
| max-width | 最大寬度（可以理解為小於該數值即成立） |
| min-height | 最小高度（可以理解為大於該數值即成立） |
| max-height | 最大高度（可以理解為小於該數值即成立） |
使用示例
在設備寬度為568px時使用樣式
@media only screen and (width:568px) {
...
}
在設備大於 569px時使用樣式
@media only screen and (min-width:569px) {
...
}
橫屏設備並且寬度大於569px時使用樣式
@media only screen and (orientation: landscape) and (min-width:569px) {
...
}
響應尺寸
設備像素
不同設備的像素尺寸差異很大，比如2K的27寸屏幕與4K的27寸屏幕的像素數量是不一樣的。如果我們編寫CSS時還要判斷設備的物理像素就會很麻煩。
我們希望編寫CSS時還是按照以往方式編寫，至於具體繪制到屏幕上使用的具體像素讓瀏覽器或小程序等自動計算就可以，這是最佳解決方案。
使用以下代碼可以輕松解決上面的問題了。（）
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
初始樣式
有些標簽默認含有內外邊距，且不同瀏覽器大小也不一樣。為了統一我們可以重置標簽的CSS默認樣式。
最簡單的方式就是使用插件css-reset完成
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css" />
自動響應
實際操作中不同設備只能取寬或高一個尺寸為響應處理，一般情況下我們取寬度響應，高度自動處理。小尺寸時高度產生滾動條，這並不影響什么。
計算公式
使用rem單位來處理響應，因為改變rem單位會影響所有使用rem的元素，這確實非常的方便。
rem是在根元素中定義的font-size
rem用來在多個設備響應處理時使用
html元素也可以使用:root選擇器選擇
另外還有一個單位即vw與vh
100vw表示100%設備寬度
100vh代表100%設備高度因為使用了
vw寬度系統會根據不同設備自動計算
:root{
font-size:15px;
}