什么是媒體查詢
我們知道，我們給網(wǎng)頁(yè)HTML寫樣式用的主要是CSS（層疊樣式表）語(yǔ)言的規(guī)則，比如：盒模型設(shè)置寬高背景色什么的。
目前我們使用的最新版本的層疊樣式表主要是CSS第三版，也就是CSS3，CSS3帶來(lái)的新特性、新功能有很多，比如：圓角效果、圖形化邊界、塊陰影與文字陰影、使用RGBA實(shí)現(xiàn)透明效果、漸變效果、使用@Font-Face實(shí)現(xiàn)定制字體、** 媒體查詢 **等等。
所以，什么是媒體查詢呢？
** 媒體查詢就是CSS3帶來(lái)的新的功能特性 **
一般認(rèn)為媒體查詢是CSS3的新增內(nèi)容，實(shí)際上CSS2就已經(jīng)有媒體查詢了，只不過(guò)css3又增加了新功能使其更加強(qiáng)大，從而讓媒體查詢發(fā)揚(yáng)光大媒體查詢的功能
功能就是：
** CSS3中新特性媒體查詢（），可為根據(jù)不同的分辨率（設(shè)備）設(shè)置不同的樣式效果 **
之前css2中定義的設(shè)備有tv設(shè)備、tty設(shè)備、屏幕設(shè)備、打印機(jī)print設(shè)備等等。到css3中基本上廢棄了很多用不到的設(shè)備，基本上只保留設(shè)備、print設(shè)備這樣的。print設(shè)置偶爾使用，比較常用的就是設(shè)備。
print設(shè)備我們可以通過(guò)Ctrl+P快捷鍵預(yù)覽一下打印的效果
簡(jiǎn)而言之，媒體查詢主要是用來(lái)做響應(yīng)式布局的
什么是響應(yīng)式布局
響應(yīng)式布局就是：我們做好的頁(yè)面css 媒體查詢判斷瀏覽器尺寸，在不同尺寸的屏幕上有不同的樣式效果回饋。比如，在大屏幕上我們需要更多的展示信息，畢竟屏幕大嘛，信息展示少了就浪費(fèi)了。在小屏幕上，我們需要隱藏一些東西，因?yàn)槠聊惶×耍畔⒄故径嗔朔炊@得過(guò)于臃腫。不同屏幕有不同的相應(yīng)，即為響應(yīng)式布局
比如有這樣一個(gè)需求：在可視區(qū)域屏幕的寬度小于480像素時(shí)，我們讓屏幕中文字由原來(lái)的黑色black變成綠色green。（默認(rèn)是黑色）
使用js解決
思路：通過(guò)對(duì)象，獲取屏幕分辨率的寬度width，進(jìn)行判斷，若小于480的時(shí)候，就改變文字的顏色。
打印對(duì)象的信息：
對(duì)象可以獲取瀏覽器窗口的相關(guān)數(shù)據(jù)，比如分辨率、屏幕大小之類的數(shù)據(jù)，可以通過(guò).獲取到，同時(shí)也自帶一些方法可以做其他事情，比如解鎖或鎖定屏幕轉(zhuǎn)向等。具體關(guān)于對(duì)象的詳細(xì)信息，歡迎訪問(wèn)MDN官方網(wǎng)址：
對(duì)應(yīng)代碼:
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documenttitle>
head>
<body>
<div class="meiti">哈嘍，我是媒體查詢div>
<script>
window.onresize = () => {
console.log(screen.width); // 打印看看screen對(duì)象信息
// 通過(guò)js去控制
if (screen.width <= 480) {
document.querySelector('div').style.color = "green"
document.querySelector('div').style.fontWeight = "bolder"
} else {
document.querySelector('div').style.color = "black"
document.querySelector('div').style.fontWeight = "normal"
}
}
script>
body>
html>效果圖:
使用媒體查詢解決
代碼:
<style>
/* 使用媒體查詢，去設(shè)置樣式更加方便 */
@media screen and (max-width: 480px) {
div {
color: green;
font-weight: bolder;
}
}
style>當(dāng)，是屏幕設(shè)備，并且，最大寬度不超過(guò)480px的時(shí)候，讓文字的顏色變成綠色加粗字體
max-width最大寬度，也就是小于等于的時(shí)候
min-width最小寬度，也就是大于等于的時(shí)候
效果圖和上圖一樣的，就不再附圖了。
二者對(duì)比
通過(guò)上述的例子，我們發(fā)現(xiàn)的確是媒體查詢?cè)跁?shū)寫的過(guò)程中更加方便，一方面js要盡量少操作dom，盡量減少回流重繪，在一個(gè)通過(guò)css控制樣式的確是比通過(guò)js操作樣式更加節(jié)省性能。所以綜上所述，css3帶來(lái)的新特性，媒體查詢的確是有一定的應(yīng)用場(chǎng)景
媒體查詢語(yǔ)法
媒體設(shè)備類型
直接寫在style標(biāo)簽里面，目前比較常用的是四種設(shè)備，其實(shí)是三種，如下：
<style media="screen">style>
<style media="print">style>
<style media="speech">style>
<style media="all">style>引入的話，也可以通過(guò)重置樣式表引入，如下：
<link rel="stylesheet" href="css/style.css" media="screen">
<link rel="stylesheet" href="css/style.css" media="print">
等 ......還可以通過(guò)@引入并指定媒體插敘語(yǔ)法，如下：
-- 當(dāng)屏幕的寬度大于360px的時(shí)候，就使用 one.css 文件里面所書(shū)寫的樣式 -->
@import url(./one.css) (min-width:360px);
-- 當(dāng)屏幕的小于880px的時(shí)候，就使用 two.css 文件里面所書(shū)寫的樣式 -->
@import url(./two.css) (max-width:880px);邏輯運(yùn)算符之三個(gè)關(guān)鍵字and 、not和only
and關(guān)鍵字（且）:
and表示并且的意思，需要同時(shí)滿足 and前和and后 的兩個(gè)條件，才會(huì)執(zhí)行對(duì)應(yīng)的媒體查詢語(yǔ)句，比如：
@media and (max-width: 480px) { 相應(yīng)css語(yǔ)句 }
意思如下：
(max-width: 480px){ 相應(yīng)css語(yǔ)句 }
not關(guān)鍵字（非）:
not關(guān)鍵字就是取反的意思，要放在@media后面，其他的語(yǔ)句前面，如下案例：
<style>
/* 小于等于360px的變成綠色加粗字體 */
/* @media screen and (max-width: 360px) { */
/* 加上not取反就是表示 就變成大于360px的變成綠色加粗字體了 */
@media not screen and (max-width: 360px) {
div {
color: green;
font-weight: bolder;
}
}
style>only關(guān)鍵字 （僅）:
支持媒體查詢語(yǔ)法就使用對(duì)應(yīng)媒體查詢語(yǔ)法，不支持就忽略。如下：
@media only and (max-width: 360px) { css語(yǔ)句 }
這種寫法使用很少，畢竟目前只有低版本瀏覽器才不支持，圖示一下，相應(yīng)瀏覽器從什么時(shí)候開(kāi)始支持的
由上圖我們可以看到，的確是比較低版本的瀏覽器才不支持，谷歌瀏覽器21版本，這個(gè)是很多年以前的版本了......
補(bǔ)充 （或） 關(guān)鍵字（使用逗號(hào) , 隔開(kāi)即可）:
如果我們有這樣的一個(gè)需求：當(dāng)屏幕的寬度小于360px或者屏幕的寬度大于480px的時(shí)候css 媒體查詢判斷瀏覽器尺寸，才讓字體變成綠色加粗樣式
此時(shí)，我們就需要使用或的語(yǔ)法，代碼如下：
<style>
@media
screen and (max-width: 360px) , /* 多個(gè)或的條件使用逗號(hào)隔開(kāi)就行了 */
screen and (min-width: 480px) {
div {
color: green;
font-weight: bolder;
}
}
style>完整語(yǔ)法
`@media not或only或不寫 mediatype或不寫（不寫就默認(rèn)screen） and ( mediafeature媒體特性 ) {
相應(yīng)css語(yǔ)句
}媒體特性就是限制條件，在什么條件下，才使用 相應(yīng)的書(shū)寫的css語(yǔ)句常用的媒體特性
- max-
- 最大高度，即 小于等于這個(gè)高度的意思
- min-
- 最小高度，即 大于等于這個(gè)高度的意思
- max-width
- 最大寬度，即 小于等于這個(gè)寬度的意思
- min-width
- 最小寬度，即 大于等于這個(gè)寬度的意思
媒體特性其實(shí)有很多，具體的使用什么特性根據(jù)項(xiàng)目實(shí)際情況。最后再附上官方的媒體查詢網(wǎng)址
附錄官網(wǎng)
的媒體查詢：
MDN的媒體查詢：