掌握相对单位、绝对单位、视口单位的特性与应用场景
CSS单位用于定义长度、尺寸、间距等数值类属性，主要分为三大类：相对单位、绝对单位、视口单位。
| 单位类型 | 单位符号 | 名称 | 核心特性 |
|---|---|---|---|
| 相对单位 | em | 相对长度单位 | 相对于当前元素的字体大小 |
| rem | 根相对长度单位 | 相对于根元素（html）的字体大小 | |
| % | 百分比 | 相对于父元素的对应属性值 | |
| 绝对单位 | px | 像素 | 屏幕物理像素点 |
| in | 英寸 | 1in = 2.54cm = 96px | |
| cm | 厘米 | 1cm = 37.8px | |
| pt | 点 | 1pt = 1/72in，适用于印刷 | |
| 视口单位 | vw | 视口宽度单位 | 1vw = 视口宽度的1% |
| vh | 视口高度单位 | 1vh = 视口高度的1% | |
| vmin | 视口最小单位 | 1vmin = vw和vh中的较小值 | |
| vmax | 视口最大单位 | 1vmax = vw和vh中的较大值 |
相对单位的数值会随参考基准变化，是响应式设计的核心，常用单位包括em、rem、%。
定义：相对于当前元素的字体大小，默认1em = 16px。
.parent1 { font-size: 16px; }
.parent2 { font-size: 20px; }
.text-1em { font-size: 1em; }
.text-1-5em { font-size: 1.5em; }
.text-2em { font-size: 2em; }
定义：相对于根元素（<html>）的字体大小，避免嵌套继承问题。
html { font-size: 16px; }
html.custom { font-size: 20px; }
.parent { font-size: 30px; } /* 不影响rem */
.text-1rem { font-size: 1rem; }
定义：相对于父元素的对应属性值。
.parent-box { width: 400px; height: 200px; }
.child-box { width: 50%; height: 80%; }
.parent-text { font-size: 20px; }
.text-150 { font-size: 150%; } /* 30px */
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>相对单位响应式布局示例</title>
<style>
html { font-size: 16px; }
@media (max-width: 768px) { html { font-size: 14px; } }
.container {
width: 80%;
margin: 0 auto;
padding: 2rem;
}
h1 { font-size: 2.5rem; margin-bottom: 1em; }
p { font-size: 1rem; line-height: 1.8em; }
.btn {
display: inline-block;
padding: 0.8em 1.5em;
background: #3498db;
color: white;
}
</style>
</head>
<body>
<div class="container">
<h1>相对单位示例</h1>
<p>文本使用rem，间距使用em，容器宽度使用%。</p>
<a href="#" class="btn">按钮</a>
</div>
</body>
</html>
绝对单位是固定的长度单位，常用单位包括px、in、cm、pt。
定义：屏幕物理像素点，最常用绝对单位。
| 单位 | 示例 | 等价px值 | 应用场景 |
|---|---|---|---|
| in | width: 1in; | 96px | 印刷设计 |
| cm | width: 1cm; | 37.8px | 印刷设计 |
| mm | width: 10mm; | 37.8px | 高精度印刷 |
| pt | font-size: 12pt; | 16px | 印刷排版 |
<!DOCTYPE html>
<html>
<head>
<style>
.card {
width: 300px;
height: 400px;
border: 1px solid #ddd;
}
.card-title { font-size: 18px; }
.print-text { font-size: 12pt; }
</style>
</head>
<body>
<div class="card">固定尺寸卡片</div>
<p class="print-text">印刷友好文本</p>
</body>
</html>
视口单位基于浏览器视口尺寸：1vw = 视口宽度的1%，1vh = 视口高度的1%。
.viewport-box1 {
width: 50vw;
height: 30vh;
padding: 2vw;
}
.viewport-box2 {
width: 20vmin;
height: 20vmin;
}
<!DOCTYPE html>
<html>
<head>
<style>
.banner {
width: 100vw;
height: 80vh;
background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url('...');
background-size: cover;
}
.banner-title { font-size: 5vw; }
</style>
</head>
<body>
<div class="banner">
<h1 class="banner-title">全屏响应式banner</h1>
</div>
</body>
</html>
| 单位类型 | 推荐应用场景 | 不推荐场景 | 最佳实践 |
|---|---|---|---|
| px | 边框宽度、固定尺寸元素 | 响应式布局的宽高 | 细节控制 |
| em | 内边距、间距 | 多层嵌套尺寸 | 相对于当前字体大小 |
| rem | 响应式字体、全局尺寸 | 局部调整 | 配合媒体查询调整根字体 |
| % | 容器宽度、图片自适应 | 字体大小 | 比例关系 |
| vw/vh | 全屏布局、banner | 小尺寸元素 | 结合max-width限制 |
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>多单位结合示例</title>
<style>
html { font-size: 16px; }
@media (max-width: 768px) { html { font-size: 14px; } }
.container { width: 90%; max-width: 1200px; margin: 0 auto; }
.header { background: #2c3e50; color: white; padding: 1.5rem 0; }
.nav { display: flex; gap: 2rem; }
.banner {
width: 100vw;
height: 70vh;
background: linear-gradient(rgba(0,0,0,0.6), rgba(0,0,0,0.6)), url('...');
background-size: cover;
display: flex;
align-items: center;
justify-content: center;
}
.banner-title { font-size: 4vw; }
.card {
width: 100%;
padding: 1.5rem;
border: 1px solid #ddd;
border-radius: 8px;
}
.card-img { width: 100%; height: 180px; object-fit: cover; }
.card-title { font-size: 1.3rem; margin-bottom: 0.8em; }
.footer { background: #2c3e50; color: white; padding: 2rem 0; }
</style>
</head>
<body>
<header class="header">
<div class="container">
<div class="logo">多单位示例</div>
<nav class="nav">
<a href="#">首页</a>
<a href="#">产品</a>
<a href="#">关于</a>
</nav>
</div>
</header>
<section class="banner">
<h1 class="banner-title">多单位结合响应式设计</h1>
</section>
<section class="container">
<div class="card">
<img src="https://picsum.photos/400/300" class="card-img">
<h3 class="card-title">产品卡片</h3>
</div>
</section>
<footer class="footer">
<div class="container">版权所有</div>
</footer>
</body>
</html>
<!-- 详细代码见实训任务完整示例（篇幅限制，此处为结构概览） -->
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
/* 响应式根字体 */
html { font-size: 16px; }
@media (max-width: 1199px) { html { font-size: 15px; } }
@media (max-width: 991px) { html { font-size: 14px; } }
@media (max-width: 767px) { html { font-size: 13px; } }
/* 全局容器 */
.container { width: 92%; max-width: 1200px; margin: 0 auto; }
/* 导航、banner、卡片等使用rem、em、vw/vh、px混合 */
.header { padding: 1rem 0; }
.nav a { font-size: 1rem; padding: 0.5em 1em; }
.banner { width: 100vw; height: 80vh; }
.banner-title { font-size: 4vw; }
.card { border: 1px solid #ddd; border-radius: 8px; padding: 1.5rem; }
.card-title { font-size: 1.4rem; margin-bottom: 0.8em; }
.card-img { width: 100%; height: 200px; }
.footer { background: #2c3e50; color: white; padding: 2rem 0; }
</style>
</head>
<body>
<!-- 实际页面结构 -->
<header>...</header>
<section class="banner">...</section>
<section class="product">...</section>
<footer>...</footer>
</body>
</html>