媒体查询是CSS3中一种强大的功能，用于根据设备的特性（如屏幕宽度、高度、分辨率等）应用不同的样式规则。通过媒体查询，我们可以实现移动端适配，从而让网站在不同设备上都能提供良好的用户体验。
以下是通过媒体查询实现移动端适配的详细步骤和解析：
媒体查询的基本语法如下：
@media 媒体类型 and (媒体特性) {
/* 样式规则 */
}
screen 表示屏幕设备。max-width、min-width、orientation 等。为了确保页面在移动设备上的正确显示，首先需要在HTML文件的 <head> 部分添加视口元标签：
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width：将视口宽度设置为设备的屏幕宽度。initial-scale=1.0：设置初始缩放比例为1。以下代码为宽度小于等于768px的设备设置特定样式：
@media screen and (max-width: 768px) {
body {
font-size: 14px;
}
.container {
width: 100%;
padding: 10px;
}
}
以下代码为宽度大于768px的设备设置特定样式：
@media screen and (min-width: 769px) {
body {
font-size: 16px;
}
.container {
width: 80%;
margin: auto;
}
}
可以同时使用多个媒体特性来定义更复杂的规则：
@media screen and (max-width: 768px) and (orientation: portrait) {
/* 竖屏模式下的样式 */
.sidebar {
display: none;
}
}
| 特性 | 描述 |
|---|---|
width | 设备的宽度 |
height | 设备的高度 |
device-width | 设备的实际宽度 |
device-height | 设备的实际高度 |
orientation | 屏幕方向（portrait 或 landscape） |
resolution | 设备的分辨率 |
flowchart TD
A[开始] --> B[设置视口元标签]
B --> C[定义基础样式]
C --> D{设备屏幕宽度是否 <= 768px?}
D --是--> E[应用小屏幕样式]
D --否--> F{设备屏幕宽度是否 > 768px?}
F --是--> G[应用大屏幕样式]
G --> H[结束]
%、em、rem）代替固定单位（如 px），以便更好地适应不同屏幕尺寸。