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