CSS媒体查询（Media Queries）是响应式设计中的核心技术之一，帮助我们在不同设备上展示不同的样式。通过媒体查询，开发者可以检测用户设备的特性，如屏幕宽度、高度、分辨率、方向等，针对性地调整网页布局。
一、CSS媒体查询基础
1.1 什么是媒体查询？
媒体查询是CSS3引入的一种技术，允许开发者根据用户的设备特性应用不同的样式规则。它不仅可以检测设备的类型，还能检查诸如设备宽度、高度、分辨率等特性。通过媒体查询，可以实现同一页面在不同设备上呈现不同的布局。
1.2 媒体类型（Media Types）
媒体类型是媒体查询中的基础，它定义了应用媒体查询的设备类型。常见的媒体类型包括以下几种：
- all：适用于所有设备，不限制设备类型。这是默认的媒体类型，即如果没有指定其他类型，媒体查询将应用于所有设备。
- print：用于打印机或打印预览时应用的样式。这种媒体类型在设计打印样式时非常有用，可以确保页面在打印时格式正确，隐藏一些不必要的内容，如导航栏等。
- screen：专为屏幕设备设计的样式，适用于电脑、平板、手机等显示屏幕的设备。
- speech：用于屏幕阅读器等有声设备，帮助为语音输出设备提供优化样式。
示例：
css
/* 适用于所有设备 */
@media all {
body {
font-size: 16px;
}
}
/* 适用于屏幕设备 */
@media screen {
body {
background-color: #f4f4f4;
}
}
/* 适用于打印机 */
@media print {
body {
color: black;
}
}1.3 媒体特征规则（Media Features）
媒体特征是媒体查询的核心部分，允许开发者根据设备的特性应用样式。常见的媒体特征包括设备的宽度、高度、分辨率和方向等。以下是几个关键的媒体特征：
1.3.1 宽度和高度（Width & Height）
width和height分别表示设备视口的宽度和高度，这两个特征通常用于针对不同设备的尺寸调整布局。例如，手机的屏幕较窄，通常需要在窄屏设备上显示单列布局，而宽屏设备可以显示多列布局。
css
/* 适用于视口宽度大于等于768px的设备 */
@media screen and (min-width: 768px) {
body {
font-size: 18px;
}
}
/* 适用于视口宽度小于768px的设备 */
@media screen and (max-width: 768px) {
body {
font-size: 16px;
}
}1.3.2 朝向（Orientation）
orientation媒体特征用于检测设备的屏幕朝向，分为portrait（竖屏）和landscape（横屏）。这对于处理移动设备的屏幕旋转非常有用。
css
/* 适用于竖屏设备 */
@media screen and (orientation: portrait) {
body {
background-color: lightblue;
}
}
/* 适用于横屏设备 */
@media screen and (orientation: landscape) {
body {
background-color: lightcoral;
}
}1.3.3 使用指点设备（Pointer）
pointer媒体特征用于检测用户是否使用了指点设备（如鼠标、触控笔）。它有三个可能的值：
- none：表示设备没有指点能力。
- coarse：表示设备使用粗略的指点设备，如手指。
- fine：表示设备使用精确的指点设备，如鼠标。
css
/* 适用于使用精确指点设备的设备，如鼠标 */
@media (pointer: fine) {
body {
cursor: pointer;
}
}
/* 适用于使用粗略指点设备的设备，如手指 */
@media (pointer: coarse) {
body {
cursor: default;
}
}二、更复杂的媒体查询
CSS媒体查询不仅可以通过单一特征进行判断，还可以通过逻辑运算符构建更加复杂的查询条件。下面将介绍如何通过"与"、"或"和"非"逻辑组合媒体查询。
2.1 媒体查询中的"与"逻辑（and）
and运算符允许开发者组合多个媒体特征，只有当所有特征条件都满足时，样式才会生效。例如，我们可以同时检测设备的宽度和屏幕朝向，只有当设备宽度大于768px且为竖屏时，才应用特定的样式。
css
/* 适用于宽度大于等于768px且为竖屏的设备 */
@media screen and (min-width: 768px) and (orientation: portrait) {
body {
background-color: lightgreen;
}
}2.2 媒体查询中的"或"逻辑（or）
or运算符可以通过多个查询条件中的任意一个满足条件时应用样式。通过逗号分隔多个条件实现"或"逻辑。
css
/* 适用于宽度大于等于1024px的设备或横屏设备 */
@media screen and (min-width: 1024px), screen and (orientation: landscape) {
body {
background-color: lightyellow;
}
}2.3 媒体查询中的"非"逻辑（not）
not运算符用于排除某些条件，即当条件不满足时应用样式。
css
/* 不适用于屏幕设备 */
@media not screen {
body {
display: none;
}
}三、如何选择断点
断点是媒体查询中定义不同样式的关键点。选择合理的断点可以确保网页在各种设备上表现良好。一般情况下，断点应基于内容，而非设备。常见的做法是根据内容的布局需求设定断点，而不是针对具体设备型号。
3.1 常用断点示例
css
/* 小屏设备（如手机） */
@media screen and (max-width: 600px) {
body {
font-size: 14px;
}
}
/* 中等屏设备（如平板） */
@media screen and (min-width: 601px) and (max-width: 1024px) {
body {
font-size: 16px;
}
}
/* 大屏设备（如桌面） */
@media screen and (min-width: 1025px) {
body {
font-size: 18px;
}
}3.2 内容优先原则
选择断点时，应遵循内容优先原则，即根据网页的内容来确定何时需要更改布局。例如，当一个多列布局在较窄的屏幕上变得难以阅读时，这就是一个适合定义断点的时机。
四、移动优先的响应式设计
移动优先（Mobile First）是现代响应式设计的基本理念，指的是首先为移动设备设计页面样式，然后通过媒体查询为更大屏幕设备添加样式。这种设计方式确保页面在小屏设备上的加载和展示更高效，适合当前移动设备用户量大幅增长的趋势。
4.1 移动优先的媒体查询
在移动优先设计中，我们通常使用min-width媒体查询，即默认样式适用于所有设备，然后通过断点逐步为更大屏幕的设备添加样式。
css
/* 默认样式适用于移动设备 */
body {
font-size: 14px;
}
/* 适用于平板和桌面设备 */
@media screen and (min-width: 768px) {
body {
font-size: 16px;
}
}
/* 适用于桌面设备 */
@media screen and (min-width: 1024px) {
body {
font-size: 18px;
}
}可以看到移动设备优先设计的思想，即所有设备默认使用小屏设备的样式，然后针对更大的屏幕逐步增强样式。
如有表述错误及欠缺之处敬请指正补充。