应用场景：响应式文章布局
背景描述
你正在为一个博客平台设计文章页面。这个页面需要展示文章的标题、作者信息、正文内容以及图片。为了确保页面在不同设备和屏幕尺寸上都能提供良好的阅读体验，你决定使用相对单位来定义元素的尺寸和间距。这样，当屏幕尺寸变化时，页面元素能够自动调整大小，保持布局的协调性和可读性。
具体实现
HTML 结构
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Blog Post Layout</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div class="article">
<h1 class="article-title">Responsive Design with Relative Units</h1>
<div class="article-meta">
<span class="author">By John Doe</span>
<span class="date">March 10, 2023</span>
</div>
<div class="article-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. ...</p>
<img src="image.jpg" alt="Example Image" class="article-image">
<p>... continue with the article content.</p>
</div>
</div>
</body>
</html>
CSS 样式（使用相对单位）
/* 基本样式重置 */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
line-height: 1.6;
padding: 2rem;
background-color: #f4f4f4;
}
/* 文章容器 */
.article {
max-width: 80%; /* 使用百分比定义宽度 */
margin: 0 auto;
background: #fff;
padding: 2rem;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
/* 文章标题 */
.article-title {
font-size: 2.5rem; /* 使用rem定义字体大小 */
margin-bottom: 1rem;
}
/* 文章元信息 */
.article-meta {
font-size: 1rem; /* 使用rem定义字体大小 */
color: #888;
margin-bottom: 2rem;
}
.article-meta span {
margin-right: 1rem; /* 使用rem定义间距 */
}
/* 文章正文 */
.article-content p {
font-size: 1.2rem; /* 使用rem定义字体大小 */
margin-bottom: 1.5rem;
}
/* 文章图片 */
.article-image {
width: 100%; /* 使用百分比定义宽度，使图片自适应容器 */
height: auto;
display: block;
margin: 2rem 0;
}
解释
1. HTML 部分：
- 使用<div class="article">容器来包裹文章的各个部分。
- 文章的标题使用<h1 class="article-title">，元信息（作者和日期）使用<div class="article-meta">，正文内容使用<div class="article-content">，图片使用<img class="article-image">。
2. CSS 部分：
-
基本样式重置：
- 使用*选择器来重置所有元素的默认外边距和内边距，并设置box-sizing为border-box，以确保元素的宽度和高度包括内边距和边框。
-
body 样式：
- 设置字体家族、行高、内边距和背景颜色。
-
文章容器：
- 使用max-width: 80%;来限制文章容器的最大宽度为浏览器窗口的80%，并使用margin: 0 auto;来使其水平居中。
- 设置背景颜色、内边距和阴影效果。
-
文章标题：
- 使用font-size: 2.5rem;来设置标题的字体大小，rem是相对于根元素（<html>）的字体大小的单位。
- 使用margin-bottom: 1rem;来设置标题下方的外边距。
-
文章元信息：
- 使用font-size: 1rem;来设置元信息的字体大小。
- 设置文字颜色和外边距。
- 使用margin-right: 1rem;来设置元信息内部元素之间的间距。
-
文章正文：
- 使用font-size: 1.2rem;来设置正文内容的字体大小。
- 设置段落之间的外边距。
-
文章图片：
- 使用width: 100%;来使图片宽度自适应其父容器的宽度。
- 设置height: auto;来保持图片的原始宽高比。
- 使用display: block;来使图片成为块级元素，以便可以设置上下外边距。
- 使用margin: 2rem 0;来设置图片上方的外边距和下方的外边距。
通过这种方式，你可以创建一个响应式的文章布局，当屏幕尺寸变化时，页面元素能够自动调整大小，保持布局的协调性和可读性。使用相对单位而不是固定单位，可以使页面更加灵活和可适应不同的设备和屏幕尺寸。
image.png
