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