在网站开发中，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样式。
家电公司网站源码是一个以米拓为核心进行开发的家电商城网站模板，程序采用metinfo5.3.9 UTF8进行编码，软件包含完整栏目与数据。安装方法：解压上传到空间，访问域名进行安装，安装好后，到后台-安全与效率-数据备份还原，恢复好数据后到设置-基本信息和外观-电脑把网站名称什么的改为自己的即可。默认后台账号：admin 密码：132456注意：如本地测试中127.0.0.1无法正常使用，请换成l
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的基本概念、语法和应用方法，并可以运用它们为你的网站设计提供更精细和个性化的样式。
