制作HTML个人页面时，响应式设计能让页面在手机、平板、桌面等不同尺寸的设备上都有良好的展示效果，而媒体查询是实现响应式适配的核心技术手段，通过匹配设备的屏幕特征应用不同的CSS规则，就能完成多端适配。
媒体查询的基本语法
媒体查询是CSS3提供的功能，核心是通过@media规则设定触发条件，当设备满足对应条件时，内部的CSS样式就会生效。基础的语法结构如下：
/* 基础媒体查询语法 */
@media 媒体类型 and (媒体特性) {
/* 满足条件的样式规则 */
}
常用的媒体类型是screen，表示面向屏幕设备，也可以省略不写。最常用的媒体特性是max-width和min-width，分别表示屏幕最大宽度和最小宽度，单位一般是px。
常见断点设置
个人页面适配常用的断点可以参考以下标准：
- 手机端：屏幕宽度小于768px
- 平板端：屏幕宽度在768px到1024px之间
- 桌面端：屏幕宽度大于1024px
个人页面响应式适配示例
下面以一个包含头部导航、个人介绍、作品展示三个模块的个人页面为例，演示如何用媒体查询完成适配。
基础HTML结构
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>个人主页</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<header class="header">
<h1 class="site-title">我的个人主页</h1>
<nav class="nav">
<ul>
<li><a href="#about">关于我</a></li>
<li><a href="#works">我的作品</a></li>
<li><a href="#contact">联系我</a></li>
</ul>
</nav>
</header>
<section class="about" id="about">
<h2>关于我</h2>
<p>这是个人介绍内容，包含基本信息和技能描述。</p>
</section>
<section class="works" id="works">
<h2>我的作品</h2>
<div class="work-list">
<div class="work-item">作品1</div>
<div class="work-item">作品2</div>
<div class="work-item">作品3</div>
</div>
</section>
</body>
</html>
通用基础样式
先编写所有设备通用的基础样式，设定盒模型和基本排版规则：
/* 通用基础样式 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: "Microsoft YaHei", sans-serif;
line-height: 1.6;
color: #333;
}
.header {
background-color: #f5f5f5;
padding: 20px;
display: flex;
justify-content: space-between;
align-items: center;
}
.nav ul {
list-style: none;
display: flex;
gap: 20px;
}
.nav a {
text-decoration: none;
color: #333;
}
.about, .works {
padding: 40px 20px;
max-width: 1200px;
margin: 0 auto;
}
.work-list {
display: flex;
gap: 20px;
margin-top: 20px;
}
.work-item {
flex: 1;
height: 200px;
background-color: #e9e9e9;
display: flex;
align-items: center;
justify-content: center;
}
平板端适配样式
当屏幕宽度小于1024px时，调整导航和作品列表的布局：
/* 平板端适配 屏幕宽度小于1024px */
@media screen and (max-width: 1024px) {
.header {
flex-direction: column;
gap: 15px;
}
.nav ul {
gap: 15px;
}
.work-list {
flex-wrap: wrap;
}
.work-item {
flex: 0 0 calc(50% - 10px);
}
}
手机端适配样式
当屏幕宽度小于768px时，进一步调整布局适配小屏幕：
/* 手机端适配 屏幕宽度小于768px */
@media screen and (max-width: 768px) {
.nav ul {
flex-direction: column;
align-items: center;
gap: 10px;
}
.work-item {
flex: 0 0 100%;
}
.about, .works {
padding: 20px 15px;
}
}
注意事项
使用媒体查询做响应式适配时，需要注意以下几点：
- 一定要在HTML的
<head>中添加<meta name="viewport" content="width=device-width, initial-scale=1.0">，否则移动端设备会默认以桌面端宽度渲染页面，媒体查询不会生效。 - 媒体查询的断点设置可以根据个人页面的实际内容调整，不需要完全照搬通用标准，以页面展示效果合适为准。
- 尽量先写移动端基础样式，再用
min-width的媒体查询逐步适配大屏幕，这种移动优先的写法可以减少冗余代码。
响应式适配除了媒体查询之外，还可以结合弹性布局、相对单位等方式，让页面适配效果更好，媒体查询主要负责不同断点下的布局切换，两者结合能提升开发效率。