CSS媒体查询

一、CSS媒体查询

CSS媒体查询是一种可以根据设备的特性和特定条件来应用不同样式的CSS技术。通过@media 查询，我们可以针对不同设备（如计算机、平板电脑、手机等）和不同的条件（如屏幕宽度、设备方向等）制作响应式布局，使网页在不同设备上都能够良好地展示。

二、媒体类型

1、all：用于所有多媒体类型设备。

2、print：用于打印机。

3、screen：用于电脑屏幕，平板，智能手机等。

4、speech：用于屏幕阅读器。

三、媒体查询作用

1、视口(viewport)的宽度与高度：例如，我们可以使用@media screen and (max-width: 600px) { ... }这样的语句来为屏幕宽度小于或等于600px的设备应用特定的样式。

2、设备的宽度与高度：可以根据设备的尺寸应用不同的css样式。

3、朝向 (智能手机横屏，竖屏)：通过媒体查询，我们可以设置当设备处于横屏模式时应用一种样式，当设备处于竖屏模式时应用另一种样式。

4、分辨率：我们可以设置当设备的屏幕分辨率低于某一特定值时应用一种样式，当分辨率高于另一特定值时应用另一种样式。

四、媒体查询语法

媒体查询由多种媒体组成，可以包含一个或多个表达式，表达式根据条件是否成立返回 true 或 false。在CSS中，媒体查询用于根据设备的特性（如屏幕宽度、分辨率等）应用不同的样式。通过使用@media规则，可以根据指定的条件来选择要应用的样式表。

@media not|only mediatype and (expressions) {
CSS 代码...;
}

也可以在不同的媒体上使用不同的样式文件：

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

五、媒体查询实例

使用媒体查询可以在指定的设备上使用对应的样式替代原有的样式。

1、在屏幕可视窗口尺寸小于 480 像素的设备上修改背景颜色：

@media screen and (max-width: 480px) {
body {
background-color: lightgreen;
}
}

2、在屏幕可视窗口尺寸大于 480 像素时将菜单浮动到页面左侧：

@media screen and (min-width: 480px) {
#leftsidebar {width: 200px; float: left;}
#main {margin-left:216px;}
}

3、在屏幕可视窗口尺寸小于 600 像素时将 div 元素隐藏：

@media screen and (max-width: 600px) {
div.example {
display: none;
}
}

六、浏览器支持