整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
SS3 加入的 @media 媒體查詢使得無(wú)需修改內(nèi)容，便可使樣式應(yīng)用于某些特定的設(shè)備范圍。媒體查詢像是樣式表的 if 語(yǔ)句，通過(guò)判斷表達(dá)式的真假來(lái)執(zhí)行特定的分支 （加載特定的樣式）。
@media 直接寫(xiě)在 CSS 樣式中，或者針對(duì)不同的媒體設(shè)備從外部鏈入不同的 stylesheets（外部樣式表）。兩種使用語(yǔ)法：
1. 直接寫(xiě)在 CSS 樣式中
定義語(yǔ)法如下：
@media mediatype and|not|only (media feature) {
CSS-Code;
}一個(gè)完整的媒體查詢由以下五部分組成：
mediatype （媒體類型）取值范圍如下：
值 | 描述 |
all | 適用于所有設(shè)備 |
用于打印機(jī)和打印預(yù)覽 | |
screen | 用于電腦屏幕，平板電腦，智能手機(jī)等 |
speech | 用于屏幕閱讀器等發(fā)聲設(shè)備 |
被廢棄的媒體類型： CSS2.1 和 Media Queries 3 定義了一些額外的媒體類型( tty, tv, projection, handheld, braille, embossed, 以及 aural )，但是它們?cè)?Media Queries 4 中已經(jīng)被廢棄，并且不應(yīng)該被使用。aural 類型被替換為具有相似效果的 speech 。
邏輯操作符取值范圍如下：
值 | 描述 |
and | 用于將多個(gè)媒體查詢規(guī)則組合成單條媒體查詢，當(dāng)每個(gè)查詢規(guī)則都為真時(shí)則該條媒體查詢?yōu)檎?/span> |
not | 用來(lái)排除某種設(shè)備 |
only | 用以指定某特定媒體設(shè)備 |
media feature （媒體特性）常用取值如下：
值 | 描述 |
max-width | 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域?qū)挾?/span> |
max-height | 定義輸出設(shè)備中的頁(yè)面最大可見(jiàn)區(qū)域高度 |
min-width | 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域?qū)挾?/span> |
min-height | 定義輸出設(shè)備中的頁(yè)面最小可見(jiàn)區(qū)域高度 |
orientation | 視口（viewport）的旋轉(zhuǎn)方向。portrait ：表示 viewport 處于縱向，即高度大于等于寬度 ； landscape ：表示 viewport 處于橫向，即寬度大于高度 |
如果你還想了解更多完整 media feature 取值，請(qǐng)?jiān)L問(wèn)：https://developer.mozilla.org/zh-CN/docs/Web/CSS/Media_Queries/Using_media_queries。
2. 針對(duì)不同的媒體設(shè)備，從外部鏈入不同的 stylesheets（外部樣式表）
用 media 屬性為 <link> 指定特定的媒體類型。定義語(yǔ)法如下：
<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystyle.css">其中，mediatype、邏輯操作符、media feature 的取值與第一種直接寫(xiě)在 CSS 樣式中的取值相同，這里不再進(jìn)行贅述。
二者區(qū)別在于，第一種寫(xiě)在 CSS 樣式中是當(dāng)條件成立后，執(zhí)行 CSS Code , 第二種則是條件成立后，加載對(duì)應(yīng)的外部樣式表。
<!DOCTYPE html>
<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>Document</title>
<style>
@media screen and (max-width: 800px){
body{
background-color: red;
}
}
@media screen and (min-width:800px){
body{
background-color:green;
}
}
@media screen and (min-width:1024px){
body{
background-color:blue;
}
}
</style>
</head>
<body>
</body>
</html>上述代碼做了如下操作：
啟動(dòng) 8080 端口，打開(kāi) Web 服務(wù)，在瀏覽器中訪問(wèn)即可看到如下效果。
手動(dòng)縮小瀏覽器寬度，當(dāng)寬度大于 800px 且小于 1024px 時(shí)，頁(yè)面顯示綠色。
繼續(xù)縮小瀏覽器寬度，當(dāng)寬度小于 800px 時(shí)，頁(yè)面顯示紅色。
通過(guò)下面的網(wǎng)址進(jìn)行查詢。
https://app.10086.cn/leadeon-cmcc-static/v2.0/pages/service/hallMap/location_list.html?WT.ac_id=1908_SBD5G_MO_P_FCZ
建議使用手機(jī)查詢查看，綠色的為覆蓋范圍
下載中國(guó)聯(lián)通APP，在服務(wù)—創(chuàng)新—5G，即可查詢所在城市聯(lián)通5G網(wǎng)絡(luò)分布情況：
比如，北京，前期筆者通過(guò)聯(lián)通APP查詢北郵5G覆蓋不錯(cuò)，便去打卡體驗(yàn)，在北郵教學(xué)樓主樓下行758Mbps，在體育館附近上行達(dá)71.8Mbps。
上海，虹橋機(jī)場(chǎng)及周邊已有聯(lián)通5G覆蓋。對(duì)于上海聯(lián)通高密集的5G網(wǎng)絡(luò)建設(shè)，小編對(duì)其用戶只有羨慕嫉妒恨！
廣州
深圳
杭州
天津
成都
南京
方法二：可通過(guò)百度地圖搜索需要查詢區(qū)域附近的“聯(lián)通5G覆蓋”。
TML 簡(jiǎn)介
地址欄打開(kāi)網(wǎng)易云網(wǎng)頁(yè)，https://music.163.com。按F12打開(kāi)“開(kāi)發(fā)者工具”面板，選擇“Element”，即可自由查看。
另一個(gè)方法：在當(dāng)前的網(wǎng)站界面，Ctrl+U直接打開(kāi)“查看網(wǎng)頁(yè)源代碼”。或點(diǎn)擊鼠標(biāo)右鍵選擇“查看網(wǎng)頁(yè)源代碼”。
注意事項(xiàng)：
<!DOCTYPE html> 必須首行固定。
<title> 為文檔標(biāo)題。
<meta charset="utf-8"> 文檔解碼格式。
<meta name="keywords" content="..."> 和 <meta name="description" content="..."> 提供給搜索引擎使用。
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 移動(dòng)端瀏覽器的寬高與縮放。
<link> 標(biāo)簽可以引入 favicon 和樣式表 CSS 文件。
*請(qǐng)認(rèn)真填寫(xiě)需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
