CSS3媒体查询media_queries响应式布局入门指南知识点总结

什么是媒体查询

我们知道，我们给网页HTML写样式用的主要是CSS（层叠样式表）语言的规则，比如：盒模型设置宽高背景色什么的。

目前我们使用的最新版本的层叠样式表主要是CSS第三版，也就是CSS3，CSS3带来的新特性、新功能有很多，比如：圆角效果、图形化边界、块阴影与文字阴影、使用RGBA实现透明效果、渐变效果、使用@Font-Face实现定制字体、媒体查询等等。

所以，什么是媒体查询呢？
媒体查询就是CSS3带来的新的功能特性

一般认为媒体查询是CSS3的新增内容，实际上CSS2就已经有媒体查询了，只不过css3又增加了新功能使其更加强大，从而让媒体查询发扬光大

媒体查询的功能

功能就是：

CSS3中新特性媒体查询（mediaqueries），可为根据不同的分辨率（设备）设置不同的样式效果

之前css2中定义的设备有tv设备、tty设备、屏幕screen设备、打印机print设备等等。到css3中基本上废弃了很多用不到的设备，基本上只保留screen设备、print设备这样的。print设置偶尔使用，比较常用的就是screen设备。

print设备我们可以通过Ctrl+P快捷键预览一下打印的效果

简而言之，媒体查询主要是用来做响应式布局的

什么是响应式布局

响应式布局就是：
我们做好的页面，在不同尺寸的屏幕上有不同的样式效果回馈。比如，在大屏幕上我们需要更多的展示信息，毕竟屏幕大嘛，信息展示少了就浪费了。在小屏幕上，我们需要隐藏一些东西，因为屏幕太小了，信息展示多了反而显得过于臃肿。不同屏幕有不同的相应，即为响应式布局

比如有这样一个需求：在可视区域屏幕的宽度小于480像素时，我们让屏幕中文字由原来的黑色black变成绿色green。（默认是黑色）

使用js解决

思路：通过screen对象，获取屏幕分辨率的宽度width，进行判断，若小于480的时候，就改变文字的颜色。

打印screen对象的信息

Screen对象可以获取浏览器窗口的相关数据，比如分辨率、屏幕大小之类的数据，可以通过window.screen获取到，同时Screen也自带一些方法可以做其他事情，比如解锁或锁定屏幕转向等。具体关于screen对象的详细信息，欢迎访问MDN官方网址： https://developer.mozilla.org...

对应代码




    
    
    
    Document


    哈喽，我是媒体查询

效果图

使用媒体查询解决

代码

当，是屏幕设备，并且，最大宽度不超过480px的时候，让文字的颜色变成绿色加粗字体
max-width最大宽度，也就是小于等于的时候
min-width最小宽度，也就是大于等于的时候

效果图和上图一样的，就不再附图了。

二者对比

通过上述的例子，我们发现的确是媒体查询在书写的过程中更加方便，一方面js要尽量少操作dom，尽量减少回流重绘，在一个通过css控制样式的确是比通过js操作样式更加节省性能。所以综上所述，css3带来的新特性，媒体查询的确是有一定的应用场景

媒体查询语法

媒体设备类型

直接写在style标签里面，目前比较常用的是四种设备，其实是三种，如下：

引入的话，也可以通过重置样式表引入，如下：





等 ......

还可以通过@import引入并指定媒体插叙语法，如下：


@import url(./one.css) (min-width:360px);

@import url(./two.css) (max-width:880px);

逻辑运算符之三个关键字and 、not和only

and关键字（且）

and表示并且的意思，需要同时满足 and前和and后的两个条件，才会执行对应的媒体查询语句，比如：
@media screen and (max-width: 480px) { 相应css语句 }

意思如下：

@media
- 表示：使用媒体查询
screen
- 表示：屏幕设备（比如电脑手机什么的），也可以不写，不写的话，默认就是屏幕screen 设备，不写screen 语法如下：
- @media (max-width: 480px) { 相应css语句 } 效果是一样的，只不过省去默认值罢了
and
- 表示：且的意思，and后面一般会跟限定条件，表示在什么条件下才会触发相应的媒体查询的样式。可以写多个and，表示多个条件的意思，举例子
- @media screen and (max-width: 480px) and (min-width: 360px) { 相应css语句 }
- 上述案例的意思是：当为屏幕设备的时候，且屏幕宽度大于360像素，小于480像素的时候，执行相应的css语句
(max-width: 480px)
- 条件的话用括号来包裹，括号里写上相应的条件语句，这里的意思是最大宽度不能超过480px，也就是小于等于的意思
{ 相应css语句 }
- 实现对应样式效果的语句

not关键字（非）

not关键字就是取反的意思，要放在@media后面，其他的语句前面，如下案例：

only关键字（仅）

支持媒体查询语法就使用对应媒体查询语法，不支持就忽略。如下：
@media only screen and (max-width: 360px) { css语句 }
这种写法使用很少，毕竟目前只有低版本浏览器才不支持，图示一下，相应浏览器从什么时候开始支持的

由上图我们可以看到，的确是比较低版本的浏览器才不支持，谷歌浏览器21版本，这个是很多年以前的版本了......

补充（或）关键字（使用逗号 , 隔开即可）

如果我们有这样的一个需求：当屏幕的宽度小于360px或者屏幕的宽度大于480px的时候，才让字体变成绿色加粗样式

此时，我们就需要使用或的语法，代码如下：

完整语法

@media  not或only或不写  mediatype或不写（不写就默认screen）  and  ( mediafeature媒体特性  ) {
   相应css语句
}

媒体特性就是限制条件，在什么条件下，才使用相应的书写的css语句

常用的媒体特性

max-height
- 最大高度，即小于等于这个高度的意思
min-height
- 最小高度，即大于等于这个高度的意思
max-width
- 最大宽度，即小于等于这个宽度的意思
min-width
- 最小宽度，即大于等于这个宽度的意思

媒体特性其实有很多，具体的使用什么特性根据项目实际情况。最后再附上官方的媒体查询网址

附录官网

W3school的媒体查询： https://www.w3school.com.cn/c...
MDN的媒体查询： https://developer.mozilla.org...