一、什么是响应式设计？
同一套 HTML 和 CSS，在不同宽度的设备上呈现不同的排列方式。
电脑（1200px+）：三栏布局，导航横排 平板（768px ~ 1200px）：两栏布局 手机（< 768px）：单栏堆叠
响应式的核心思路：样式去适应屏幕，而不是为每个屏幕写一套 HTML。
二、第一步：设置视口（Viewport）
这是很多人忽视但必须写的一行，不写视口，移动端页面会被压缩得很小。
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>我的响应式页面</title>
</head>
讲解：
width=device-width：视口宽度等于设备宽度initial-scale=1.0：初始缩放比例为 1，不放大也不缩小
三、媒体查询（@media）——CSS的条件执行
媒体查询的语法像 if 语句：如果"满足这个条件"，就执行里面的样式。
/* 基础样式：所有屏幕都生效 */
.container {
width: 100%;
padding: 20px;
}
/* 当屏幕宽度 >= 768px 时生效 */
@media (min-width: 768px) {
.container {
width: 720px;
margin: 0 auto;
padding: 40px;
}
}
/* 当屏幕宽度 >= 1200px 时生效 */
@media (min-width: 1200px) {
.container {
width: 1160px;
padding: 60px;
}
}
讲解：
@media (min-width: 768px)意思是"当视口宽度至少 768px 时"断点通常设在 768px（手机→平板）和 1200px（平板→电脑）
四、移动优先 vs 桌面优先
写响应式 CSS 有两种思路，推荐移动优先：
/* === 默认：手机（最基础样式） === */
.sidebar { display: none; }
.main-content { width: 100%; }
/* === 平板及以上：显示侧边栏 === */
@media (min-width: 768px) {
.sidebar { display: block; width: 200px; }
.main-content { width: calc(100% - 200px); }
}
/* === 电脑及以上：侧边栏加宽 === */
@media (min-width: 1200px) {
.sidebar { width: 280px; }
}
推荐移动优先的原因： 移动端限制更多（屏幕小、网络慢），先照顾移动端，再给大屏"锦上添花"。
五、实战：响应式卡片网格
<div class="card-grid">
<div class="card"><h3>卡片1</h3><p>描述文字</p></div>
<div class="card"><h3>卡片2</h3><p>描述文字</p></div>
<div class="card"><h3>卡片3</h3><p>描述文字</p></div>
<div class="card"><h3>卡片4</h3><p>描述文字</p></div>
</div>
/* === 基础样式（手机） === */
.card-grid {
display: grid;
grid-template-columns: 1fr; /* 手机单列 */
gap: 16px;
padding: 16px;
}
/* === 平板（>= 768px）：两列 === */
@media (min-width: 768px) {
.card-grid {
grid-template-columns: repeat(2, 1fr);
padding: 24px;
gap: 20px;
}
}
/* === 电脑（>= 1200px）：三列 === */
@media (min-width: 1200px) {
.card-grid {
grid-template-columns: repeat(3, 1fr);
padding: 32px;
gap: 24px;
}
}
HTML 一个字没改，全是 CSS 媒体查询在起作用。
六、常用响应式单位
rem——相对于根元素的字体大小
html { font-size: 16px; }
.title { font-size: 2rem; } /* 2rem = 32px */
@media (max-width: 767px) {
html { font-size: 14px; } /* 手机上整体缩小基准字号 */
}
讲解：rem 相对于 <html> 的字体大小。如果全局改了基准字号，所有用 rem 的地方都会自动跟着变。
em——相对于当前元素的字体大小
.parent { font-size: 16px; }
.child { font-size: 2em; } /* 相对于 parent，2em = 32px */
vw / vh——视口的宽高
.hero {
height: 100vh; /* 视口高度 */
background-color: #2c3e50;
display: flex;
align-items: center;
justify-content: center;
}
.title { font-size: 5vw; } /* 字体大小是视口宽度的5%，自动缩放 */
讲解：
100vh= 整个视口高度，常用于首屏大图/Hero区域vw= Viewport Width，5vw表示视口宽度的 5%
七、实战：响应式导航栏
<nav class="navbar">
<div class="logo">MySite</div>
<button class="menu-toggle">☰</button>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">课程</a></li>
<li><a href="#">关于</a></li>
<li><a href="#" class="btn-nav">登录</a></li>
</ul>
</nav>
* { margin: 0; padding: 0; box-sizing: border-box; }
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px20px;
background-color: #2c3e50;
}
.nav-links {
display: none;
position: absolute;
top: 60px;
left: 0;
right: 0;
background-color: #34495e;
flex-direction: column;
padding: 20px;
gap: 16px;
}
.menu-toggle {
display: block;
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
@media (min-width: 768px) {
.menu-toggle { display: none; }
.nav-links {
display: flex;
position: static;
flex-direction: row;
background: none;
padding: 0;
gap: 24px;
}
.nav-linksa { color: #bdc3c7; text-decoration: none; font-size: 15px; }
.btn-nav { padding: 6px16px; background-color: #3498db; border-radius: 4px; color: white; }
}
优网科技，优秀企业首选的互联网供应服务商
优网科技秉承"专业团队、品质服务" 的经营理念，诚信务实的服务了近万家客户，成为众多世界500强、集团和上市公司的长期合作伙伴！
优网科技成立于2001年，擅长网站建设、网站与各类业务系统深度整合，致力于提供完善的企业互联网解决方案。优网科技提供PC端网站建设（品牌展示型、官方门户型、营销商务型、电子商务型、信息门户型、微信小程序定制开发、移动端应用（手机站、APP开发）、微信定制开发（微信官网、微信商城、企业微信）等一系列互联网应用服务。
公安局备案号：
专属顾问
