使用 @media 查询，你可以针对不同的媒体类型定义不同的样式。
@media 可以针对不同的屏幕尺寸设置不同的样式，特别是如果你需要设置设计响应式的页面，@media 是非常有用的。
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
一、页面中引入媒体类型方法也有多种
1、link方法引入
<link rel="stylesheet" media="screen and (max-width: 600px)" href="sytle1.css" />
在屏幕最大是600px的时候加载”sytle1.css”
2、@import 方式引用，这种方式的引用，要在style中，写法如下：
<style type="text/css" media="screen">
@import url("css/style.css");
</style>
或者：
<style type="text/css" media="screen and (max-width: 600px)">
@import url("css/style.css");
</style>
3、第三种方法，也是我很喜欢用的，也就是下面的这种方法：
@media screen and (max-width: 600px) {
选择器 {
属性：属性值；
}
}
二、Media Queries的具体使用方式
1、最大宽度Max Width
面表示的是：当屏幕小于或等于600px时，将采用style2.css样式来渲染Web页面。
<link rel="stylesheet" media="screen and (max-width:600px)" href="style2.css" type="text/css" />
2、最小宽度Min Width
下面的样式会在可视区域的宽度大于 900px 的时候被应用。
@media screen and (min-width: 900px) {
.class {
background: #666;
}
}
3、多个Media Queries使用
你还可以使用过个匹配条件，下面的样式会在可视区域的宽度在 600px 和 900px 之间的时候被应用。
@media screen and (min-width: 600px) and (max-width: 900px) {
.class {
background: #333;
}
}
4、设备屏幕的输出宽度Device Width
下面的样式会在 max-device-width 是 480px 的设备上触发。（提示：max-device-width 是设备的实际分辨率，而 max-width 指的是可视区域分辨率。）
@media screen and (max-device-width: 480px) {
.class {
background: #000;
}
}
5、iPad
在大数情况下，移动设备iPad上的Safari和在iPhone上的是相同的，只是他们不同之处是iPad声明了不同的方向，比如说下面的例子，在纵向(portrait)时采用portrait.css来渲染页面；在横向（landscape）时采用landscape.css来渲染页面。
<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" type="text/css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" type="text/css" />
6、关键字（not、only）
not关键字是用来排除某种制定的媒体类型，换句话来说就是用于排除符合表达式的设备。如下：
<link rel="stylesheet" media="not print and (max-width: 1200px)" href="print.css" type="text/css" />
only用来定某种特定的媒体类型，可以用来排除不支持媒体查询的浏览器。
其实only很多时候是用来对那些不支持Media Query但却支持Media Type的设备隐藏样式表的。
其主要有：支持媒体特性（Media Queries）的设备，正常调用样式，此时就当only不存在；对于不支持媒体特性(Media Queries)但又支持媒体类型(Media Type)的设备，这样就会不读了样式，因为其先读only而不是screen；另外不支持Media Qqueries的浏览器，不论是否支持only，样式都不会被采用。如下：
<link rel="stylesheet" media="only screen and (max-device-width:240px)" href="a.css" type="text/css" />
7、其他
在Media Query中如果没有明确指定Media Type，那么其默认为all，如：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
另外还有使用逗号（，）被用来表示并列或者表示或，如下：
<link rel="stylesheet" media="(min-width: 701px) and (max-width: 900px)" href="medium.css" type="text/css" />
（完）
上海网站建设说：感谢分享
快乐编程,快乐生活说：山有木兮木有枝，心悦君兮君不知。 https://happycodinghappylife.com
Adoncn说：感谢的无私分享！
( 0 )个小伙伴在吐槽