CSS3 媒体查询

1. 什么是媒体查询

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

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

2. 媒体查询的语法规范

@media mediatype and|not|only (media feature) {
   /* CSS样式 */
}
1
2
3

①用 @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. 应用：根据页面宽度改变背景变色

    


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

上述代码执行效果如上图，当我们改变浏览器窗口的宽度时，我们div盒子的背景色会根据我们设置的条件进行改变，这就是媒体查询的作用。

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

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

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

4.1语法规范

 
1

4.2 示例

 

/* 表示电子设备屏幕大于等于600px时,将会引用styleA.css这个css文件 */
1
2
3

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

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

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