CSS3 媒体查询

article/2025/7/9 2:09:09

1. 什么是媒体查询

CSS3媒体查询（Media Query）语法的特性：

①使用 @media 查询，可以针对不同的媒体类型定义不同的样式；
②@media 可以针对不同的屏幕尺寸设置不同的样式；
③当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面；
④目前针对很多苹果手机、Android手机，平板等设备都用得到多媒体查询.

2. 媒体查询的语法规范

@media mediatype and|not|only (media feature) {/* CSS样式 */
}
①用 @media 开头注意@符号

②mediatype 是媒体类型，比如常见的为screen(表示电脑屏幕、平板电脑、智能手机等）、print(表示打印机和打印预览）、all(表示所有设备）

③关键字 and not only
（1）and：表示可以将多个媒体特性连接到一起，相当于“且”的意思
（2）not：表示排除某个媒体类型，相当于“非”的意思，可以省略
（3）only：表示指定某个特定的媒体类型，可以省略

④media feature 媒体特性必须有小括号包含。每种媒体类型都具有各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格。我们暂且了解以下三个常用的：
（1）width：表示输出设备中页面可见区域的宽度
（2）min-width：表示输出设备中页面最小可见区域的宽度
（3）max-width：表示输出设备中页面最大可见区域的宽度

3. 应用：根据页面宽度改变背景变色

<style>div {height: 200px;background-color: yellow;    /* 给div设置背景色为黄色 */}@media screen and (min-width:600px) {div {background-color: skyblue;    /* 表示屏幕尺寸大于等于600px时，背景色变为天蓝色 */}}@media screen and (min-width:900px) {div {background-color: pink;  /* 表示屏幕尺寸大于等于900px时，背景色变为粉色 */}}@media screen and (min-width:1200px) {div {background-color: red;  /* 表示屏幕尺寸大于等于1200px时，背景色变为红色 */}}
</style>
<body><div></div>
</body>
上述代码执行效果如上图，当我们改变浏览器窗口的宽度时，我们div盒子的背景色会根据我们设置的条件进行改变，这就是媒体查询的作用。

需要注意以下两点点：
（1）媒体查询我们要按照从小到大或者从大到小的顺序来写,但是我们最喜欢的还是从小到大来写，这样代码更简洁
（2）最大值 max-width 和最小值 min-width都是包含等于的

4. 媒体查询+外部链接引入CSS

当样式比较繁多的时候，我们可以针对不同的媒体使用不同的css文件。方法，就是直接在link中判断设备的尺寸，然后引用不同的css文件。

4.1语法规范

<link rel="stylesheet" media="mediatype and|not|only (media feature)" href="mystylesheet.css">

4.2 示例

<link rel="stylesheet" href="styleA.css" media="screen and (min-width: 600px)"> /* 表示电子设备屏幕大于等于600px时,将会引用styleA.css这个css文件 */

5. 媒体查询+rem实现元素动态大小变化

结合昨日介绍的rem单位，我们知道rem是跟着html走的，所以有了rem，页面元素可以设置不同大小尺寸。而媒体查询可以根据不同设备宽度来修改样式，因此，媒体查询+rem 就可以实现不同设备宽度页面元素大小的动态变化。

先自我介绍一下，小编13年上师交大毕业，曾经在小公司待过，去过华为OPPO等大厂，18年进入阿里，直到现在。深知大多数初中级java工程师，想要升技能，往往是需要自己摸索成长或是报班学习，但对于培训机构动则近万元的学费，着实压力不小。自己不成体系的自学效率很低又漫长，而且容易碰到天花板技术停止不前。因此我收集了一份《java开发全套学习资料》送给大家，初衷也很简单，就是希望帮助到想自学又不知道该从何学起的朋友，同时减轻大家的负担。添加下方名片，即可获取全套学习资料哦