Web开发学习笔记（41）-CSS3（14）媒体查询

SS3 加入的 @media 媒体查询使得无需修改内容，便可使样式应用于某些特定的设备范围。媒体查询像是样式表的 if 语句，通过判断表达式的真假来执行特定的分支（加载特定的样式）。

@media 直接写在 CSS 样式中，或者针对不同的媒体设备从外部链入不同的 stylesheets（外部样式表）。两种使用语法：

1. 直接写在 CSS 样式中

定义语法如下：

@media mediatype and|not|only (media feature) {
    CSS-Code;
}

一个完整的媒体查询由以下五部分组成：

必须是以 @media 开头。
使用 mediatype 指定媒体（设备）类型。
使用 and | not | only 逻辑操作符构建复杂的媒体查询。
使用 media feature 指定媒体特性。
CSS-Code 位置是要设置的 CSS 样式。

mediatype （媒体类型）取值范围如下：

值	描述
all	适用于所有设备
print	用于打印机和打印预览
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>

上述代码做了如下操作：

定义媒体查询规则，当设备类型为 screen 并且设备中的页面最大可见区域宽度为 800px 的时候，页面背景颜色为红色。
定义媒体查询规则，当设备类型为 screen 并且设备中的页面最小可见区域宽度为 800px 的时候，页面背景颜色为绿色。
定义媒体查询规则，当设备类型为 screen 并且设备中的页面最小可见区域宽度为 1024px 的时候，页面背景颜色为蓝色。

启动 8080 端口，打开 Web 服务，在浏览器中访问即可看到如下效果。

手动缩小浏览器宽度，当宽度大于 800px 且小于 1024px 时，页面显示绿色。

继续缩小浏览器宽度，当宽度小于 800px 时，页面显示红色。

国移动5G覆盖查询方法：

通过下面的网址进行查询。

https://app.10086.cn/leadeon-cmcc-static/v2.0/pages/service/hallMap/location_list.html?WT.ac_id=1908_SBD5G_MO_P_FCZ

建议使用手机查询查看，绿色的为覆盖范围

联通5G覆盖查询方法

下载中国联通APP，在服务—创新—5G，即可查询所在城市联通5G网络分布情况：

比如，北京，前期笔者通过联通APP查询北邮5G覆盖不错，便去打卡体验，在北邮教学楼主楼下行758Mbps，在体育馆附近上行达71.8Mbps。

上海，虹桥机场及周边已有联通5G覆盖。对于上海联通高密集的5G网络建设，小编对其用户只有羡慕嫉妒恨！

广州

深圳

杭州

天津

成都

南京

方法二：可通过百度地图搜索需要查询区域附近的“联通5G覆盖”。

TML 简介

地址栏打开网易云网页，https://music.163.com。按F12打开“开发者工具”面板，选择“Element”，即可自由查看。

另一个方法：在当前的网站界面，Ctrl+U直接打开“查看网页源代码”。或点击鼠标右键选择“查看网页源代码”。

注意事项：

<!DOCTYPE html> 必须首行固定。

<title> 为文档标题。

在线咨询

上一篇：大屏数据展示模板（HTML）
下一篇：当您在浏览器中输入网址时会发生什么？

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

Web开发学习笔记（41）-CSS3（14）媒体查询

国移动5G覆盖查询方法：

联通5G覆盖查询方法

您的项目需求