响应式设计（Responsive Web Design）是一种让网页能够自适应不同设备和屏幕尺寸的设计方法。通过灵活的布局、图片和CSS媒体查询,让网站在桌面、平板和手机上都能良好显示。
东巴文（db-w.cn） 认为：响应式设计是现代Web开发的必备技能,移动优先的设计理念能提升用户体验。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>视口设置示例</title>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 视口演示 */
.viewport-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
}
.viewport-info {
background: #e3f2fd;
padding: 15px;
border-radius: 5px;
margin: 10px 0;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>视口设置</h1>
<h2>viewport meta标签</h2>
<p>视口（viewport）是用户网页的可视区域。在移动设备上,viewport meta标签至关重要。</p>
<div class="code-block">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</div>
<h2>viewport属性</h2>
<table class="info-table">
<thead>
<tr>
<th>属性</th>
<th>说明</th>
<th>示例值</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>视口宽度</td>
<td>device-width 或 具体像素值</td>
</tr>
<tr>
<td>height</td>
<td>视口高度</td>
<td>device-height 或 具体像素值</td>
</tr>
<tr>
<td>initial-scale</td>
<td>初始缩放比例</td>
<td>0.0 - 10.0</td>
</tr>
<tr>
<td>minimum-scale</td>
<td>最小缩放比例</td>
<td>0.0 - 10.0</td>
</tr>
<tr>
<td>maximum-scale</td>
<td>最大缩放比例</td>
<td>0.0 - 10.0</td>
</tr>
<tr>
<td>user-scalable</td>
<td>是否允许用户缩放</td>
<td>yes 或 no</td>
</tr>
</tbody>
</table>
<h2>常用viewport设置</h2>
<h3>标准响应式设置</h3>
<div class="code-block">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</div>
<h3>禁止用户缩放</h3>
<div class="code-block">
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
</div>
<h3>限制缩放范围</h3>
<div class="code-block">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.5, maximum-scale=2.0">
</div>
<h2>视口单位</h2>
<p>CSS提供了视口相关的单位,方便响应式设计。</p>
<table class="info-table">
<thead>
<tr>
<th>单位</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>vw</td>
<td>视口宽度的1%</td>
<td>width: 100vw;</td>
</tr>
<tr>
<td>vh</td>
<td>视口高度的1%</td>
<td>height: 100vh;</td>
</tr>
<tr>
<td>vmin</td>
<td>vw和vh中较小的值</td>
<td>font-size: 5vmin;</td>
</tr>
<tr>
<td>vmax</td>
<td>vw和vh中较大的值</td>
<td>font-size: 3vmax;</td>
</tr>
</tbody>
</table>
<div class="viewport-demo">
<div class="viewport-info">
<strong>当前视口信息：</strong><br>
宽度: <span id="viewport-width">-</span>px<br>
高度: <span id="viewport-height">-</span>px
</div>
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>始终在HTML文档的<head>中添加viewport meta标签,这是响应式设计的基础。
</div>
</div>
<script>
// 显示视口尺寸
function updateViewportInfo() {
document.getElementById('viewport-width').textContent = window.innerWidth;
document.getElementById('viewport-height').textContent = window.innerHeight;
}
updateViewportInfo();
window.addEventListener('resize', updateViewportInfo);
</script>
</body>
</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>
<style>
/* 基础样式 */
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 媒体查询演示 */
.media-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
text-align: center;
}
/* 默认样式（移动优先） */
.responsive-box {
background: #e3f2fd;
border: 2px solid #2196f3;
padding: 20px;
margin: 10px 0;
font-size: 14px;
}
/* 小屏幕（手机） */
@media (max-width: 575px) {
.responsive-box::before {
content: "小屏幕（手机）- max-width: 575px";
font-weight: bold;
display: block;
margin-bottom: 10px;
}
}
/* 中等屏幕（平板） */
@media (min-width: 576px) and (max-width: 991px) {
.responsive-box {
background: #f3e5f5;
border-color: #9c27b0;
font-size: 16px;
}
.responsive-box::before {
content: "中等屏幕（平板）- 576px - 991px";
font-weight: bold;
display: block;
margin-bottom: 10px;
}
}
/* 大屏幕（桌面） */
@media (min-width: 992px) {
.responsive-box {
background: #e8f5e9;
border-color: #4caf50;
font-size: 18px;
}
.responsive-box::before {
content: "大屏幕（桌面）- min-width: 992px";
font-weight: bold;
display: block;
margin-bottom: 10px;
}
}
/* 响应式网格 */
.grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin: 20px 0;
}
@media (min-width: 576px) {
.grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.grid {
grid-template-columns: repeat(3, 1fr);
}
}
.grid-item {
background: #667eea;
color: white;
padding: 20px;
text-align: center;
border-radius: 5px;
}
/* 响应式导航 */
.nav-demo {
background: #667eea;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
.nav-demo ul {
list-style: none;
padding: 0;
margin: 0;
}
.nav-demo li {
padding: 10px;
text-align: center;
}
.nav-demo a {
color: white;
text-decoration: none;
display: block;
}
@media (min-width: 768px) {
.nav-demo ul {
display: flex;
justify-content: space-around;
}
.nav-demo li {
padding: 0 20px;
}
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>媒体查询</h1>
<h2>媒体查询语法</h2>
<div class="code-block">
@media (max-width: 575px) {<br>
/* 小屏幕样式 */<br>
}<br><br>
@media (min-width: 576px) and (max-width: 991px) {<br>
/* 中等屏幕样式 */<br>
}<br><br>
@media (min-width: 992px) {<br>
/* 大屏幕样式 */<br>
}
</div>
<h2>响应式演示</h2>
<div class="media-demo">
<p>调整浏览器窗口大小查看效果</p>
</div>
<div class="responsive-box">
<p>这是一个响应式盒子,根据屏幕尺寸改变样式。</p>
</div>
<h2>响应式网格</h2>
<div class="grid">
<div class="grid-item">项目 1</div>
<div class="grid-item">项目 2</div>
<div class="grid-item">项目 3</div>
<div class="grid-item">项目 4</div>
<div class="grid-item">项目 5</div>
<div class="grid-item">项目 6</div>
</div>
<h2>响应式导航</h2>
<div class="nav-demo">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
<h2>常用断点</h2>
<table class="info-table">
<thead>
<tr>
<th>设备类型</th>
<th>断点范围</th>
<th>Bootstrap类</th>
</tr>
</thead>
<tbody>
<tr>
<td>超小屏幕（手机）</td>
<td>< 576px</td>
<td>col-</td>
</tr>
<tr>
<td>小屏幕（手机横屏）</td>
<td>≥ 576px</td>
<td>col-sm-</td>
</tr>
<tr>
<td>中等屏幕（平板）</td>
<td>≥ 768px</td>
<td>col-md-</td>
</tr>
<tr>
<td>大屏幕（桌面）</td>
<td>≥ 992px</td>
<td>col-lg-</td>
</tr>
<tr>
<td>超大屏幕</td>
<td>≥ 1200px</td>
<td>col-xl-</td>
</tr>
<tr>
<td>超大屏幕</td>
<td>≥ 1400px</td>
<td>col-xxl-</td>
</tr>
</tbody>
</table>
<h2>媒体特性</h2>
<table class="info-table">
<thead>
<tr>
<th>特性</th>
<th>说明</th>
<th>示例</th>
</tr>
</thead>
<tbody>
<tr>
<td>width</td>
<td>视口宽度</td>
<td>(width: 768px)</td>
</tr>
<tr>
<td>height</td>
<td>视口高度</td>
<td>(height: 600px)</td>
</tr>
<tr>
<td>device-width</td>
<td>设备宽度</td>
<td>(device-width: 768px)</td>
</tr>
<tr>
<td>orientation</td>
<td>屏幕方向</td>
<td>(orientation: landscape)</td>
</tr>
<tr>
<td>resolution</td>
<td>分辨率</td>
<td>(resolution: 2dppx)</td>
</tr>
<tr>
<td>hover</td>
<td>悬停能力</td>
<td>(hover: hover)</td>
</tr>
<tr>
<td>pointer</td>
<td>指针类型</td>
<td>(pointer: coarse)</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>推荐使用移动优先的方式编写媒体查询,从最小屏幕开始,逐步增强。
</div>
</div>
</body>
</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>
<style>
/* 基础样式 */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #f5f5f5;
}
/* 响应式容器 */
.container {
width: 100%;
padding: 0 15px;
margin: 0 auto;
}
@media (min-width: 576px) {
.container {
max-width: 540px;
}
}
@media (min-width: 768px) {
.container {
max-width: 720px;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
@media (min-width: 1200px) {
.container {
max-width: 1140px;
}
}
/* 响应式网格系统 */
.row {
display: flex;
flex-wrap: wrap;
margin: 0 -15px;
}
[class*="col-"] {
position: relative;
width: 100%;
padding: 0 15px;
margin-bottom: 30px;
}
/* 超小屏幕（默认） */
.col-12 { flex: 0 0 100%; max-width: 100%; }
.col-6 { flex: 0 0 50%; max-width: 50%; }
/* 小屏幕 */
@media (min-width: 576px) {
.col-sm-12 { flex: 0 0 100%; max-width: 100%; }
.col-sm-6 { flex: 0 0 50%; max-width: 50%; }
.col-sm-4 { flex: 0 0 33.333%; max-width: 33.333%; }
}
/* 中等屏幕 */
@media (min-width: 768px) {
.col-md-6 { flex: 0 0 50%; max-width: 50%; }
.col-md-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-md-3 { flex: 0 0 25%; max-width: 25%; }
}
/* 大屏幕 */
@media (min-width: 992px) {
.col-lg-4 { flex: 0 0 33.333%; max-width: 33.333%; }
.col-lg-3 { flex: 0 0 25%; max-width: 25%; }
.col-lg-2 { flex: 0 0 16.666%; max-width: 16.666%; }
}
/* 卡片样式 */
.card {
background: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
height: 100%;
}
.card h3 {
color: #667eea;
margin-bottom: 10px;
}
.card p {
color: #666;
line-height: 1.6;
}
/* 页面标题 */
.page-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 60px 0;
text-align: center;
margin-bottom: 40px;
}
.page-header h1 {
font-size: 2.5em;
margin-bottom: 10px;
}
@media (max-width: 768px) {
.page-header h1 {
font-size: 2em;
}
}
/* 响应式图片 */
.responsive-image {
width: 100%;
height: auto;
border-radius: 5px;
margin-bottom: 15px;
}
/* 响应式字体 */
.responsive-text {
font-size: 16px;
line-height: 1.6;
}
@media (min-width: 768px) {
.responsive-text {
font-size: 18px;
}
}
@media (min-width: 992px) {
.responsive-text {
font-size: 20px;
}
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 20px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
/* 提示框 */
.tip-box {
background: #fff3cd;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
</style>
</head>
<body>
<div class="page-header">
<div class="container">
<h1>响应式布局</h1>
<p>使用Flexbox和媒体查询构建响应式网格系统</p>
</div>
</div>
<div class="container">
<h2 style="color: #667eea; margin-bottom: 20px;">网格系统</h2>
<div class="row">
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<h3>卡片 1</h3>
<p>这是一个响应式卡片,在不同屏幕尺寸下占据不同的列数。</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<h3>卡片 2</h3>
<p>这是一个响应式卡片,在不同屏幕尺寸下占据不同的列数。</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<h3>卡片 3</h3>
<p>这是一个响应式卡片,在不同屏幕尺寸下占据不同的列数。</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<h3>卡片 4</h3>
<p>这是一个响应式卡片,在不同屏幕尺寸下占据不同的列数。</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<h3>卡片 5</h3>
<p>这是一个响应式卡片,在不同屏幕尺寸下占据不同的列数。</p>
</div>
</div>
<div class="col-12 col-md-6 col-lg-4">
<div class="card">
<h3>卡片 6</h3>
<p>这是一个响应式卡片,在不同屏幕尺寸下占据不同的列数。</p>
</div>
</div>
</div>
<div class="code-block">
/* 响应式网格类 */<br>
.col-12 { /* 手机：全宽 */ }<br>
.col-md-6 { /* 平板：半宽 */ }<br>
.col-lg-4 { /* 桌面：三分之一宽 */ }
</div>
<div class="tip-box">
<strong>东巴文提示：</strong>调整浏览器窗口大小,观察卡片的布局变化。
</div>
</div>
</body>
</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>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 响应式图片基础 */
.img-fluid {
max-width: 100%;
height: auto;
display: block;
border-radius: 5px;
margin: 15px 0;
}
/* 图片容器 */
.image-container {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 5px;
}
/* 图片网格 */
.image-grid {
display: grid;
grid-template-columns: 1fr;
gap: 15px;
margin: 20px 0;
}
@media (min-width: 576px) {
.image-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.image-grid {
grid-template-columns: repeat(3, 1fr);
}
}
.image-item {
background: #e3f2fd;
height: 200px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
font-size: 48px;
}
/* 图片缩放 */
.img-thumbnail {
max-width: 100%;
height: auto;
padding: 5px;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
transition: transform 0.3s;
}
.img-thumbnail:hover {
transform: scale(1.05);
}
/* 背景图片 */
.hero-image {
width: 100%;
height: 300px;
background-image: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-size: 24px;
border-radius: 5px;
margin: 20px 0;
}
@media (min-width: 768px) {
.hero-image {
height: 400px;
font-size: 32px;
}
}
/* 图片覆盖 */
.img-cover {
width: 100%;
height: 200px;
object-fit: cover;
border-radius: 5px;
}
/* 图片包含 */
.img-contain {
width: 100%;
height: 200px;
object-fit: contain;
background: #f8f9fa;
border-radius: 5px;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>响应式图片</h1>
<h2>基础响应式图片</h2>
<div class="code-block">
img {<br>
max-width: 100%;<br>
height: auto;<br>
}
</div>
<div class="image-container">
<div style="background: #e3f2fd; height: 200px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
<span style="font-size: 48px;">🖼️</span>
</div>
</div>
<h2>图片网格</h2>
<div class="image-grid">
<div class="image-item">🌅</div>
<div class="image-item">🌄</div>
<div class="image-item">🏞️</div>
<div class="image-item">🌆</div>
<div class="image-item">🌃</div>
<div class="image-item">🖼️</div>
</div>
<h2>object-fit属性</h2>
<table class="info-table">
<thead>
<tr>
<th>属性值</th>
<th>说明</th>
</tr>
</thead>
<tbody>
<tr>
<td>fill</td>
<td>拉伸图片以填充容器（可能变形）</td>
</tr>
<tr>
<td>contain</td>
<td>保持比例,完整显示图片</td>
</tr>
<tr>
<td>cover</td>
<td>保持比例,填满容器（可能裁剪）</td>
</tr>
<tr>
<td>none</td>
<td>保持原始尺寸</td>
</tr>
<tr>
<td>scale-down</td>
<td>取none或contain中较小的</td>
</tr>
</tbody>
</table>
<h3>object-fit: cover</h3>
<div class="image-container">
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); height: 200px; border-radius: 5px;"></div>
</div>
<h3>object-fit: contain</h3>
<div class="image-container">
<div style="background: #f8f9fa; height: 200px; display: flex; justify-content: center; align-items: center; border-radius: 5px;">
<div style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); width: 150px; height: 150px; border-radius: 5px;"></div>
</div>
</div>
<h2>响应式背景图片</h2>
<div class="hero-image">
响应式背景图片
</div>
<div class="code-block">
.hero-image {<br>
background-image: url('image.jpg');<br>
background-size: cover;<br>
background-position: center;<br>
}
</div>
<h2>picture元素</h2>
<div class="code-block">
<picture><br>
<source media="(min-width: 992px)" srcset="large.jpg"><br>
<source media="(min-width: 768px)" srcset="medium.jpg"><br>
<img src="small.jpg" alt="响应式图片"><br>
</picture>
</div>
<h2>srcset属性</h2>
<div class="code-block">
<img srcset="small.jpg 480w,<br>
medium.jpg 800w,<br>
large.jpg 1200w"<br>
src="medium.jpg"<br>
alt="响应式图片">
</div>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>使用picture元素和srcset属性可以根据设备屏幕尺寸加载不同大小的图片,提升性能。
</div>
</div>
</body>
</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>
<style>
body {
font-family: 'Segoe UI', sans-serif;
padding: 20px;
background: #f5f5f5;
}
.container {
max-width: 800px;
margin: 0 auto;
background: white;
padding: 30px;
border-radius: 10px;
}
h1 {
color: #667eea;
margin-bottom: 20px;
}
h2 {
color: #764ba2;
margin: 30px 0 15px;
border-left: 4px solid #764ba2;
padding-left: 15px;
}
/* 响应式字体方法 */
/* 方法1：媒体查询 */
.font-media-query {
font-size: 16px;
}
@media (min-width: 768px) {
.font-media-query {
font-size: 18px;
}
}
@media (min-width: 992px) {
.font-media-query {
font-size: 20px;
}
}
/* 方法2：视口单位 */
.font-vw {
font-size: 4vw;
}
/* 方法3：clamp()函数 */
.font-clamp {
font-size: clamp(16px, 4vw, 24px);
}
/* 方法4：calc()函数 */
.font-calc {
font-size: calc(16px + 0.5vw);
}
/* 字体演示 */
.font-demo {
background: #f8f9fa;
padding: 20px;
border: 2px solid #ddd;
margin: 20px 0;
border-radius: 5px;
}
/* 响应式标题 */
.responsive-title {
font-size: 2rem;
}
@media (min-width: 768px) {
.responsive-title {
font-size: 2.5rem;
}
}
@media (min-width: 992px) {
.responsive-title {
font-size: 3rem;
}
}
/* 流式排版 */
.fluid-typography {
font-size: clamp(1rem, 2.5vw, 2rem);
line-height: 1.4;
}
/* 代码块 */
.code-block {
background: #f8f9fa;
padding: 15px;
border-radius: 5px;
border-left: 3px solid #667eea;
margin: 10px 0;
font-family: 'Courier New', monospace;
overflow-x: auto;
}
/* 表格 */
.info-table {
width: 100%;
border-collapse: collapse;
margin: 20px 0;
}
.info-table th,
.info-table td {
padding: 12px;
text-align: left;
border: 1px solid #ddd;
}
.info-table th {
background: #667eea;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>响应式字体</h1>
<h2>方法1：媒体查询</h2>
<div class="font-demo">
<p class="font-media-query">这是使用媒体查询的响应式字体。调整浏览器窗口大小查看效果。</p>
</div>
<div class="code-block">
.text {<br>
font-size: 16px;<br>
}<br><br>
@media (min-width: 768px) {<br>
.text { font-size: 18px; }<br>
}<br><br>
@media (min-width: 992px) {<br>
.text { font-size: 20px; }<br>
}
</div>
<h2>方法2：视口单位</h2>
<div class="font-demo">
<p class="font-vw">这是使用vw单位的响应式字体。</p>
</div>
<div class="code-block">
.text {<br>
font-size: 4vw; /* 视口宽度的4% */<br>
}
</div>
<h2>方法3：clamp()函数</h2>
<div class="font-demo">
<p class="font-clamp">这是使用clamp()函数的响应式字体,有最小和最大值限制。</p>
</div>
<div class="code-block">
.text {<br>
font-size: clamp(16px, 4vw, 24px);<br>
/* 最小16px,理想值4vw,最大24px */<br>
}
</div>
<h2>方法4：calc()函数</h2>
<div class="font-demo">
<p class="font-calc">这是使用calc()函数的响应式字体。</p>
</div>
<div class="code-block">
.text {<br>
font-size: calc(16px + 0.5vw);<br>
}
</div>
<h2>响应式标题</h2>
<div class="font-demo">
<h1 class="responsive-title">响应式标题</h1>
</div>
<h2>流式排版</h2>
<div class="font-demo">
<p class="fluid-typography">流式排版让字体大小在最小值和最大值之间平滑过渡,提供最佳阅读体验。</p>
</div>
<h2>字体大小对比</h2>
<table class="info-table">
<thead>
<tr>
<th>方法</th>
<th>优点</th>
<th>缺点</th>
</tr>
</thead>
<tbody>
<tr>
<td>媒体查询</td>
<td>精确控制,兼容性好</td>
<td>代码较多,不够平滑</td>
</tr>
<tr>
<td>视口单位</td>
<td>平滑过渡,代码简洁</td>
<td>可能过大或过小</td>
</tr>
<tr>
<td>clamp()</td>
<td>平滑过渡,有界限</td>
<td>兼容性一般</td>
</tr>
<tr>
<td>calc()</td>
<td>灵活,可组合</td>
<td>需要调试</td>
</tr>
</tbody>
</table>
<div style="background: #fff3cd; padding: 15px; border-radius: 5px; margin-top: 20px;">
<strong>东巴文提示：</strong>推荐使用clamp()函数实现流式排版,既平滑又有界限,提供最佳用户体验。
</div>
</div>
</body>
</html>
/* 移动优先：从小屏幕开始 */
.container {
width: 100%;
padding: 15px;
}
/* 逐步增强 */
@media (min-width: 768px) {
.container {
max-width: 720px;
margin: 0 auto;
}
}
@media (min-width: 992px) {
.container {
max-width: 960px;
}
}
/* 使用相对单位 */
.text {
font-size: 1rem;
line-height: 1.6;
margin-bottom: 1.5em;
}
.container {
max-width: 80%;
padding: 5%;
}
问题1：以下哪个viewport设置是响应式设计的标准配置？
A. <meta name="viewport" content="width=device-width">
B. <meta name="viewport" content="initial-scale=1.0">
C. <meta name="viewport" content="width=device-width, initial-scale=1.0">
D. <meta name="viewport" content="user-scalable=no">
答案：C
东巴文解释：标准响应式设计配置包括width=device-width（宽度等于设备宽度）和initial-scale=1.0（初始缩放比例为1）,确保网页在移动设备上正确显示。
</details>问题2：以下哪种方法最适合实现流式字体大小？
A. 使用固定像素值 B. 使用媒体查询 C. 使用clamp()函数 D. 使用百分比
<details> <summary>点击查看答案</summary>答案：C
东巴文解释：clamp()函数可以设置最小值、理想值和最大值,实现平滑的字体大小过渡,同时避免字体过大或过小。
</details>任务：创建一个响应式产品展示页面,包含导航栏、产品网格和页脚,在手机上显示单列,平板上显示双列,桌面上显示三列。
<details> <summary>点击查看参考答案</summary><!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>响应式产品展示 - 东巴文</title>
<style>
/* 全局设置 */
*,
*::before,
*::after {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: 'Segoe UI', sans-serif;
background: #f5f5f5;
line-height: 1.6;
}
/* 导航栏 */
.navbar {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 20px;
position: sticky;
top: 0;
z-index: 1000;
}
.navbar .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.navbar .logo {
font-size: 24px;
font-weight: bold;
}
.navbar .nav-links {
display: none;
list-style: none;
}
@media (min-width: 768px) {
.navbar .nav-links {
display: flex;
gap: 30px;
}
}
.navbar .nav-links a {
color: white;
text-decoration: none;
transition: opacity 0.3s;
}
.navbar .nav-links a:hover {
opacity: 0.8;
}
.navbar .menu-btn {
background: none;
border: none;
color: white;
font-size: 24px;
cursor: pointer;
}
@media (min-width: 768px) {
.navbar .menu-btn {
display: none;
}
}
/* 页面标题 */
.page-header {
background: white;
padding: 60px 20px;
text-align: center;
}
.page-header h1 {
font-size: clamp(2rem, 5vw, 3rem);
color: #333;
margin-bottom: 15px;
}
.page-header p {
font-size: clamp(1rem, 2vw, 1.2rem);
color: #666;
max-width: 600px;
margin: 0 auto;
}
/* 产品网格 */
.products {
max-width: 1200px;
margin: 0 auto;
padding: 40px 20px;
}
.product-grid {
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
@media (min-width: 576px) {
.product-grid {
grid-template-columns: repeat(2, 1fr);
}
}
@media (min-width: 992px) {
.product-grid {
grid-template-columns: repeat(3, 1fr);
}
}
/* 产品卡片 */
.product-card {
background: white;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: transform 0.3s, box-shadow 0.3s;
}
.product-card:hover {
transform: translateY(-10px);
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
}
.product-image {
width: 100%;
height: 200px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
display: flex;
justify-content: center;
align-items: center;
font-size: 64px;
}
.product-info {
padding: 20px;
}
.product-title {
font-size: 1.25rem;
color: #333;
margin-bottom: 10px;
}
.product-price {
font-size: 1.5rem;
color: #667eea;
font-weight: bold;
margin-bottom: 15px;
}
.product-description {
color: #666;
font-size: 0.9rem;
margin-bottom: 15px;
}
.product-button {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: opacity 0.3s;
}
.product-button:hover {
opacity: 0.9;
}
/* 页脚 */
.footer {
background: #333;
color: white;
padding: 40px 20px;
text-align: center;
}
.footer-content {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: 1fr;
gap: 30px;
}
@media (min-width: 768px) {
.footer-content {
grid-template-columns: repeat(3, 1fr);
text-align: left;
}
}
.footer h3 {
margin-bottom: 15px;
color: #667eea;
}
.footer ul {
list-style: none;
}
.footer li {
margin-bottom: 10px;
}
.footer a {
color: #ccc;
text-decoration: none;
transition: color 0.3s;
}
.footer a:hover {
color: #667eea;
}
.footer-bottom {
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #555;
color: #999;
}
</style>
</head>
<body>
<!-- 导航栏 -->
<nav class="navbar">
<div class="container">
<div class="logo">东巴文</div>
<ul class="nav-links">
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">关于</a></li>
<li><a href="#">联系</a></li>
</ul>
<button class="menu-btn">☰</button>
</div>
</nav>
<!-- 页面标题 -->
<header class="page-header">
<h1>我们的产品</h1>
<p>探索我们精心设计的产品系列,为您的生活带来便利和品质</p>
</header>
<!-- 产品网格 -->
<section class="products">
<div class="product-grid">
<div class="product-card">
<div class="product-image">📱</div>
<div class="product-info">
<h3 class="product-title">智能手机</h3>
<div class="product-price">¥3,999</div>
<p class="product-description">高性能处理器,超长续航,出色拍照体验</p>
<button class="product-button">立即购买</button>
</div>
</div>
<div class="product-card">
<div class="product-image">💻</div>
<div class="product-info">
<h3 class="product-title">笔记本电脑</h3>
<div class="product-price">¥6,999</div>
<p class="product-description">轻薄便携,性能强劲,办公娱乐两不误</p>
<button class="product-button">立即购买</button>
</div>
</div>
<div class="product-card">
<div class="product-image">⌚</div>
<div class="product-info">
<h3 class="product-title">智能手表</h3>
<div class="product-price">¥1,999</div>
<p class="product-description">健康监测,运动追踪,时尚外观</p>
<button class="product-button">立即购买</button>
</div>
</div>
<div class="product-card">
<div class="product-image">🎧</div>
<div class="product-info">
<h3 class="product-title">无线耳机</h3>
<div class="product-price">¥899</div>
<p class="product-description">主动降噪,高清音质,舒适佩戴</p>
<button class="product-button">立即购买</button>
</div>
</div>
<div class="product-card">
<div class="product-image">📷</div>
<div class="product-info">
<h3 class="product-title">数码相机</h3>
<div class="product-price">¥4,999</div>
<p class="product-description">专业画质,快速对焦,易于操作</p>
<button class="product-button">立即购买</button>
</div>
</div>
<div class="product-card">
<div class="product-image">🎮</div>
<div class="product-info">
<h3 class="product-title">游戏主机</h3>
<div class="product-price">¥2,999</div>
<p class="product-description">震撼画质,丰富游戏,沉浸体验</p>
<button class="product-button">立即购买</button>
</div>
</div>
</div>
</section>
<!-- 页脚 -->
<footer class="footer">
<div class="footer-content">
<div>
<h3>关于我们</h3>
<p>东巴文致力于为用户提供优质的产品和服务。</p>
</div>
<div>
<h3>快速链接</h3>
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">产品</a></li>
<li><a href="#">服务</a></li>
<li><a href="#">联系</a></li>
</ul>
</div>
<div>
<h3>联系方式</h3>
<ul>
<li>邮箱: info@db-w.cn</li>
<li>电话: 400-123-4567</li>
<li>地址: 中国北京</li>
</ul>
</div>
</div>
<div class="footer-bottom">
<p>© 2024 东巴文（db-w.cn）. 保留所有权利.</p>
</div>
</footer>
</body>
</html>
东巴文（db-w.cn） - 让编程学习更有趣！ **