HTML 负责搭建页面结构，CSS 负责样式设计，并且通过媒体查询实现了较好的响应式效果，能够适应不同屏幕尺寸下面就是写了一个详细的实例。
CSS 部分
* {margin: 0;padding: 0;box-sizing: border-box;
}*是通配选择器，会选中页面上的所有元素。margin: 0;将所有元素的外边距设置为 0。padding: 0;将所有元素的内边距设置为 0。box-sizing: border-box;改变元素宽度和高度的计算方式，使元素的宽度和高度包含内边距和边框，但不包含外边距。
body {font-family: Arial, sans-serif;line-height: 1.6;
}font-family: Arial, sans-serif;设置页面主体文字的字体为 Arial，如果 Arial 不可用，则使用系统默认的无衬线字体。line-height: 1.6;设置行高为字体大小的 1.6 倍，让文字在垂直方向上有合适的间距。
header {background-color: #333;color: white;padding: 1rem;
}background-color: #333;设置header元素的背景颜色为深灰色。color: white;设置header内文字的颜色为白色。padding: 1rem;给header元素添加 1 个根元素字体大小的内边距。
nav {display: flex;justify-content: space-between;align-items: center;max-width: 1200px;margin: 0 auto;
}display: flex;将nav元素设置为弹性布局容器。justify-content: space-between;在水平方向上，将子元素均匀分布，两端对齐。align-items: center;在垂直方向上，将子元素居中对齐。max-width: 1200px;设置nav元素的最大宽度为 1200 像素。margin: 0 auto;让nav元素在水平方向上居中显示。
nav ul {display: flex;list-style: none;
}display: flex;将nav内的无序列表设置为弹性布局容器。list-style: none;去除无序列表的默认列表项标记。
nav ul li {margin-left: 2rem;
}margin-left: 2rem;给nav内无序列表的每个列表项添加 2 个根元素字体大小的左外边距。
nav a {color: white;text-decoration: none;
}color: white;设置nav内链接文字的颜色为白色。text-decoration: none;去除链接的下划线。
.portfolio {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 2rem;padding: 2rem;max-width: 1200px;margin: 0 auto;
}display: grid;将.portfolio元素设置为网格布局容器。grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));定义网格列的布局，会根据容器宽度自动适应列数，每列最小宽度为 300 像素，最大宽度平均分配剩余空间。gap: 2rem;设置网格项之间的间距为 2 个根元素字体大小。padding: 2rem;给.portfolio元素添加 2 个根元素字体大小的内边距。max-width: 1200px;设置.portfolio元素的最大宽度为 1200 像素。margin: 0 auto;让.portfolio元素在水平方向上居中显示。
.card {background: #f4f4f4;padding: 1rem;border-radius: 8px;box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}background: #f4f4f4;设置.card元素的背景颜色为浅灰色。padding: 1rem;给.card元素添加 1 个根元素字体大小的内边距。border-radius: 8px;给.card元素添加 8 像素的圆角。box-shadow: 0 2px 5px rgba(0,0,0,0.1);给.card元素添加一个轻微的阴影效果。
.card img {width: 100%;height: auto;border-radius: 4px;
}width: 100%;设置.card内图片的宽度为父元素宽度的 100%。height: auto;让图片的高度根据宽度自动调整，保持图片的原始比例。border-radius: 4px;给.card内图片添加 4 像素的圆角。
.card h3 {margin: 1rem 0;
}margin: 1rem 0;给.card内的h3标题添加上下 1 个根元素字体大小的外边距。
footer {background: #333;color: white;text-align: center;padding: 1rem;position: fixed;bottom: 0;width: 100%;
}background: #333;设置footer元素的背景颜色为深灰色。color: white;设置footer内文字的颜色为白色。text-align: center;让footer内的文字居中显示。padding: 1rem;给footer元素添加 1 个根元素字体大小的内边距。position: fixed;将footer元素固定在页面上。bottom: 0;让footer元素位于页面底部。width: 100%;设置footer元素的宽度为 100%。
/* 响应式设计 */
@media (max-width: 768px) {nav {flex-direction: column;text-align: center;}nav ul {margin-top: 1rem;flex-direction: column;}nav ul li {margin: 0.5rem 0;}.portfolio {grid-template-columns: 1fr;padding: 1rem;}
}@media (max-width: 768px)是媒体查询，当屏幕宽度小于等于 768 像素时，应用以下样式。flex-direction: column;将nav元素和nav内的无序列表的弹性布局方向改为垂直方向。text-align: center;让nav内的文字居中显示。margin-top: 1rem;给nav内的无序列表添加 1 个根元素字体大小的上外边距。margin: 0.5rem 0;给nav内无序列表的每个列表项添加上下 0.5 个根元素字体大小的外边距。grid-template-columns: 1fr;将.portfolio元素的网格布局改为单列。padding: 1rem;给.portfolio元素添加 1 个根元素字体大小的内边距。
HTML 部分
<!DOCTYPE html>
<html lang="zh-CN"><!DOCTYPE html>声明文档类型为 HTML5。<html lang="zh-CN">定义 HTML 文档的根元素，并设置语言为中文（中国大陆）。
<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><meta charset="UTF-8">设置文档的字符编码为 UTF-8。<meta name="viewport" content="width=device-width, initial-scale=1.0">配置视口，让页面宽度与设备宽度相同，初始缩放比例为 1.0。<title>响应式作品集</title>设置页面的标题为 “响应式作品集”。<link rel="stylesheet" href="style.css">引入外部样式表style.css。
<body><header><nav><h1>我的作品集</h1><ul><li><a href="#home">首页</a></li><li><a href="#works">作品</a></li><li><a href="#about">关于</a></li></ul></nav></header><header>定义页面的页眉部分。<nav>定义导航栏。<h1>我的作品集</h1>显示网站标题。<ul>定义无序列表。<li>定义列表项。<a href="#home">首页</a>定义链接，点击后跳转到页面内 ID 为home的元素位置（这里代码中未给出home元素）。
<main><section id="works" class="portfolio"><div class="card"><img src="https://via.placeholder.com/300" alt="作品1"><h3>作品标题1</h3><p>作品描述内容</p></div><div class="card"><img src="https://via.placeholder.com/300" alt="作品2"><h3>作品标题2</h3><p>作品描述内容</p></div><div class="card"><img src="https://via.placeholder.com/300" alt="作品3"><h3>作品标题3</h3><p>作品描述内容</p></div></section></main><main>定义页面的主要内容区域。<section id="works" class="portfolio">定义一个章节，ID 为works，类名为portfolio。<div class="card">定义一个卡片容器。<img src="https://via.placeholder.com/300" alt="作品1">显示一张占位图片，alt属性为图片的替代文本。<h3>作品标题1</h3>显示作品标题。<p>作品描述内容</p>显示作品描述。
<footer><p>© All rights reserved.</p></footer>
</body>
</html><footer>定义页面的页脚部分。<p>© All rights reserved.</p>显示版权信息，©是版权符号的 HTML 实体。
