在网站开发中，css的重要性不言而喻。我们可以通过css来为网站设定样式、布局、字体等各种外观属性，使网站呈现出更具吸引力和易读性的外观。但是，不同的设备（如桌面电脑、平板电脑、手机等）拥有不同的屏幕尺寸和分辨率，如果没有针对不同设备的css样式设置，网站显示效果可能会相当不理想。
解决这个问题的方法之一是CSS Media Query（CSS媒体查询）功能，该功能能够针对不同的设备编写不同的CSS样式。本文将深入介绍CSS Media Query的基本概念、语法和应用案例，让你上手这项实用的技术。
什么是CSS Media Query
CSS Media Query是一种在样式表中嵌入的条件语句，用于指定不同屏幕尺寸和设备类型应用不同的CSS样式。通过CSS Media Query，我们可以实现响应式网站设计（Responsive Web Design），使网站在不同设备上都能够提供最佳的用户体验。
CSS Media Query部分是由媒体类型和媒体特性组成的，格式如下：
@media mediatype and|not|only (media feature) {
CSS rules;
}其中mediatype指定要应用CSS样式的媒体类型，如screen、print、handheld等，而 media feature指定要应用CSS样式的媒体特性，如设备宽度、设备高度、方向等。
立即学习“前端免费学习笔记（深入）”；
媒体类型
媒体类型是指用于呈现文档的设备类型。常见的媒体类型包括：
- all：适用于所有设备。
- print: 适用于打印机和打印预览等输出设备。
- screen：适用于电脑屏幕、平板电脑、智能手机等屏幕设备。
- handheld：适用于小屏幕的手持设备（如智能手机）。
- speech：适用于屏幕阅读器等声音设备。
媒体特性
媒体特性包括但不限于以下几种：
- width：视口宽度，单位px。
- height：视口高度，单位px。
- device-width：设备宽度。
- device-height：设备高度。
- orientation：设备方向，landscape（横向）或portrait（竖向）。
- aspect-ratio：视口宽度与高度的比例。
- color：设备颜色位深。
- resolution:设备分辨率，单位dpi。
通过上述两种组合，我们可以针对不同设备类型和屏幕属性，定义不同的CSS样式。
CSS Media Query的使用示例
下面是一些具体的CSS Media Query使用示例，涉及到针对不同设备和屏幕特性的定制样式。
1.针对不同设备类型设置不同样式
/* 设备为电脑屏幕 */
@media screen and (min-width: 768px) {
body {
background-color: #333333;
}
}
/* 设备为智能手机屏幕 */
@media handheld and (max-width: 599px) {
body {
background-color: #ffffff;
}
}上面两段CSS代码分别针对电脑屏幕和智能手机屏幕，应用不同的背景颜色。
2.针对设备方向设置不同样式
/* 设备为横向 */
@media screen and (orientation: landscape) {
body {
background-color: #f3f3f3;
}
}
/* 设备为竖向 */
@media screen and (orientation: portrait) {
body {
background-color: #ffffff;
}
}上面两段CSS代码针对设备方向（横向或竖向），设置不同的背景颜色。
3.针对视口宽度设置不同样式
/* 视口宽度大于等于 960px */
@media screen and (min-width: 960px) {
body {
font-size: 16px;
}
}
/* 视口宽度小于 960px */
@media screen and (max-width: 959px) {
body {
font-size: 14px;
}
}上面两段CSS代码基于视口宽度，应用不同的字体大小。
4.结合多种条件
当然在实际使用中，根据具体情况需要结合多种条件。例如，我们要设置一个适用于智能手机的logo图片，但是只有当设备的视口宽度小于等于800px时才生效。这时候可以使用如下的代码：
@media handheld and (max-device-width: 800px),
(-webkit-min-device-pixel-ratio: 1.5) {
#logo {
content:url('logo-for-smartphone.png');
}
}在这段CSS代码中，我们使用了handheld and (max-device-width: 800px)和(-webkit-min-device-pixel-ratio: 1.5)两个条件。前者指定设备为手持设备，并且设备视口宽度小于800px。后者兼容了WebKit渲染引擎，指定设备像素比大于1.5。
总结
CSS Media Query功能是响应式网站设计的重要组成部分，可以帮助我们为不同设备类型和屏幕特性编写不同的CSS样式。通过本文的介绍，你应该已经了解到CSS Media Query的基本概念、语法和应用方法，并可以运用它们为你的网站设计提供更精细和个性化的样式。
