@media 媒體查詢這個屬性通常是用在不同屏幕下可以設置不同的樣式，它多用在響應式頁面中。 1. 官方定義@media 可以針對不同的屏幕尺寸設置不同的樣式，特別是如果你需要設置設計響應式的頁面，@media 是非常有用的。 2. 解釋@media 通常被人們稱為媒體查詢，其實就是響應式，它通過設定后面的參數來實現在不同的瀏覽器可視尺寸下的展示效果。 它不僅僅可以用來設置 CSS 樣式，也可以設置 HTML頁面中 link 的引用。 3. 語法在開始使用 @media 標簽前，首先需要在 .html 文件中設置： <Meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no> 這段代碼主要是用來兼容移動設備的展示效果。 我們簡單的對這幾個參數進行一下解釋：
<Meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0, viewport-fit=cover，user-scalable=no" name="viewport" /> 意思是縮放比例為 1，最大縮放比例為 1 不可以手動縮放。里面的 viewport-fit 是指瀏覽器視圖填充方式是否全屏。 @media 標簽下面我們就來看一下@media 標簽的使用方法，先看一下語法： @media mediatype and|not|only (media feature) {
CSS Code
}說明： @media 不同于其它的 CSS3 屬性，它是一個標簽，后面跟了一個名稱，和一個大括號，這和我們 JavaScript 函數很像，大家也可以這么理解。 mediatype 用來描述當前瀏覽器所在設備的類型，比如是計算機顯示器、手機、電視等等。 mediatype 有一個表：
說明：我們常用的媒體類型通常設置為 screen。代碼如下 @media screen and (max-width: 500px) {
}上面就是所有瀏覽器中適用我們 and 之后的規則。
media feature 括號內的它就是用來指定分辨率的。寫法如下： @media only screen and (max-width: 500px) {
}它的意思就是當瀏覽器的可視區域小于 500px 時候使用 {} 內的規則，具體規則如下：
經驗介紹：我們在設置媒體響應的條件時候，通常使用的是 max-width、min-width、max-height、min-height，這里面有一個比較繞人的地方： 4. 兼容性
5. 實例
@media screen and (max-width:400px){
html,body{
background:red;
}
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media screen and (max-width:400px){
html,body{
background:red;
}
}
</style>
<body>
</body>
</html>
@media only screen and (max-width:600px){
html,body{
background:red;
}
}效果圖：
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media only screen and (max-width:600px){
html,body{
background:red;
}
}
</style>
<body>
</body>
</html>
@media only screen and (min-width:600px) and ( max-width:800px){
html,body{
background:red;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<style>
@media only screen and (min-width:600px) and ( max-width:800px){
html,body{
background:red;
}
}
</style>
<body>
</body>
</html>說明：這段代碼的意思是當瀏覽器可視區域大于 600px 小于 800px 背景色為紅色。 6. 小結在工作中媒體查詢不只是用來限定 css 文件中使用哪組樣式，也可以直接作用在 link 標簽上，讓頁面直接選擇什么樣的 css 文件。 例如： <link rel="stylesheet" type="text/css" media="screen and (orientation:portrait)" href="style.css"> 說明：@media 變成了標簽屬性 media ,上面的意思就是用來區分移動設備是橫向還是縱向的。 |
