2025/9/17大约 14 分钟
CSS弹性盒模型与响应式设计
学习目标
- 掌握Flexbox弹性盒模型的核心概念
- 学会使用Flexbox进行现代化布局
- 理解响应式设计的原理和实现
- 掌握媒体查询的使用技巧
Flexbox弹性盒模型
Flexbox概念
Flexbox（弹性盒模型）是CSS3引入的一种强大的布局方法，它提供了一种更加高效的方式来排列、分布和对齐容器中的项目，即使它们的大小未知或是动态的。
Flexbox的优势：
- 简化复杂布局的实现
- 更好的空间分配和对齐控制
- 响应式设计更容易实现
- 解决传统布局的诸多问题
Flexbox基本概念
/* Flexbox基本结构 */
.flex-container {
display: flex; /* 启用Flexbox */
/* 或者 display: inline-flex; 行内弹性容器 */
}
.flex-item {
/* 弹性项目的样式 */
flex: 1; /* 弹性增长 */
}核心概念：
- 主轴（Main Axis）：Flexbox的主要方向
- 交叉轴（Cross Axis）：垂直于主轴的方向
- 弹性容器（Flex Container）：设置了
display: flex的父元素 - 弹性项目（Flex Items）：弹性容器的直接子元素
弹性容器属性
flex-direction - 主轴方向
点击展开示例
/* 主轴方向设置 */
.flex-row {
display: flex;
flex-direction: row; /* 水平方向，从左到右（默认） */
}
.flex-row-reverse {
display: flex;
flex-direction: row-reverse; /* 水平方向，从右到左 */
}
.flex-column {
display: flex;
flex-direction: column; /* 垂直方向，从上到下 */
}
.flex-column-reverse {
display: flex;
flex-direction: column-reverse; /* 垂直方向，从下到上 */
}
/* 实际应用示例 */
.navigation {
display: flex;
flex-direction: row; /* 水平导航 */
gap: 20px;
}
.sidebar-nav {
display: flex;
flex-direction: column; /* 垂直侧边栏 */
gap: 10px;
}
@media (max-width: 768px) {
.navigation {
flex-direction: column; /* 移动端垂直导航 */
}
}justify-content - 主轴对齐
点击展开示例
/* 主轴对齐方式 */
.justify-start {
display: flex;
justify-content: flex-start; /* 起始位置对齐（默认） */
}
.justify-end {
display: flex;
justify-content: flex-end; /* 结束位置对齐 */
}
.justify-center {
display: flex;
justify-content: center; /* 居中对齐 */
}
.justify-between {
display: flex;
justify-content: space-between; /* 两端对齐，项目间等距 */
}
.justify-around {
display: flex;
justify-content: space-around; /* 项目周围等距 */
}
.justify-evenly {
display: flex;
justify-content: space-evenly; /* 项目间完全等距 */
}
/* 实际应用示例 */
.header {
display: flex;
justify-content: space-between; /* Logo左对齐，导航右对齐 */
align-items: center;
padding: 0 20px;
height: 60px;
}
.button-group {
display: flex;
justify-content: center; /* 按钮组居中 */
gap: 10px;
margin-top: 20px;
}
.footer-links {
display: flex;
justify-content: space-evenly; /* 页脚链接等距分布 */
padding: 20px 0;
}align-items - 交叉轴对齐
点击展开示例
/* 交叉轴对齐方式 */
.align-start {
display: flex;
align-items: flex-start; /* 起始位置对齐 */
}
.align-end {
display: flex;
align-items: flex-end; /* 结束位置对齐 */
}
.align-center {
display: flex;
align-items: center; /* 居中对齐 */
}
.align-baseline {
display: flex;
align-items: baseline; /* 基线对齐 */
}
.align-stretch {
display: flex;
align-items: stretch; /* 拉伸对齐（默认） */
}
/* 实际应用示例 */
.card {
display: flex;
align-items: center; /* 垂直居中 */
padding: 20px;
border: 1px solid #ddd;
border-radius: 8px;
}
.card-image {
width: 80px;
height: 80px;
border-radius: 50%;
margin-right: 20px;
}
.card-content {
flex: 1;
}
/* 完美居中 */
.center-content {
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
height: 100vh;
}flex-wrap - 换行控制
点击展开示例
/* 换行控制 */
.flex-nowrap {
display: flex;
flex-wrap: nowrap; /* 不换行（默认） */
}
.flex-wrap {
display: flex;
flex-wrap: wrap; /* 换行 */
}
.flex-wrap-reverse {
display: flex;
flex-wrap: wrap-reverse; /* 反向换行 */
}
/* 简写属性 */
.flex-flow {
display: flex;
flex-flow: row wrap; /* flex-direction + flex-wrap */
}
/* 实际应用示例 */
.product-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
padding: 20px;
}
.product-item {
flex: 0 0 calc(33.333% - 14px); /* 三列布局，考虑gap */
min-width: 250px; /* 最小宽度 */
background: white;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}
@media (max-width: 768px) {
.product-item {
flex: 0 0 calc(50% - 10px); /* 移动端两列 */
}
}
@media (max-width: 480px) {
.product-item {
flex: 0 0 100%; /* 小屏幕单列 */
}
}align-content - 多行对齐
点击展开示例
/* 多行对齐（仅在flex-wrap: wrap时有效） */
.align-content-start {
display: flex;
flex-wrap: wrap;
align-content: flex-start; /* 多行起始对齐 */
}
.align-content-end {
display: flex;
flex-wrap: wrap;
align-content: flex-end; /* 多行结束对齐 */
}
.align-content-center {
display: flex;
flex-wrap: wrap;
align-content: center; /* 多行居中对齐 */
}
.align-content-between {
display: flex;
flex-wrap: wrap;
align-content: space-between; /* 多行两端对齐 */
}
.align-content-around {
display: flex;
flex-wrap: wrap;
align-content: space-around; /* 多行周围等距 */
}
.align-content-stretch {
display: flex;
flex-wrap: wrap;
align-content: stretch; /* 多行拉伸（默认） */
}弹性项目属性
flex-grow - 增长因子
点击展开示例
/* 增长因子控制 */
.flex-container {
display: flex;
width: 600px;
}
.item-1 {
flex-grow: 1; /* 占用1份剩余空间 */
background-color: #e3f2fd;
}
.item-2 {
flex-grow: 2; /* 占用2份剩余空间 */
background-color: #fff3e0;
}
.item-3 {
flex-grow: 1; /* 占用1份剩余空间 */
background-color: #f3e5f5;
}
/* 实际应用：响应式布局 */
.layout {
display: flex;
min-height: 100vh;
}
.sidebar {
flex-grow: 0; /* 不增长 */
flex-shrink: 0; /* 不收缩 */
flex-basis: 250px; /* 基础宽度 */
background-color: #f8f9fa;
}
.main-content {
flex-grow: 1; /* 占用剩余空间 */
padding: 20px;
}flex-shrink - 收缩因子
点击展开示例
/* 收缩因子控制 */
.shrink-container {
display: flex;
width: 300px; /* 容器宽度小于项目总宽度 */
}
.shrink-item-1 {
width: 200px;
flex-shrink: 1; /* 默认收缩 */
background-color: #ffebee;
}
.shrink-item-2 {
width: 200px;
flex-shrink: 0; /* 不收缩 */
background-color: #e8f5e8;
}
.shrink-item-3 {
width: 200px;
flex-shrink: 2; /* 收缩因子为2 */
background-color: #fff3e0;
}flex-basis - 基础尺寸
点击展开示例
/* 基础尺寸设置 */
.basis-container {
display: flex;
}
.basis-auto {
flex-basis: auto; /* 根据内容自动计算（默认） */
}
.basis-fixed {
flex-basis: 200px; /* 固定基础宽度 */
}
.basis-percent {
flex-basis: 50%; /* 百分比基础宽度 */
}
.basis-zero {
flex-basis: 0; /* 基础宽度为0 */
flex-grow: 1; /* 完全依赖增长因子 */
}flex - 简写属性
点击展开示例
/* flex简写属性：flex-grow flex-shrink flex-basis */
.flex-shorthand {
display: flex;
}
.flex-1 {
flex: 1; /* 等价于 flex: 1 1 0% */
}
.flex-auto {
flex: auto; /* 等价于 flex: 1 1 auto */
}
.flex-none {
flex: none; /* 等价于 flex: 0 0 auto */
}
.flex-initial {
flex: initial; /* 等价于 flex: 0 1 auto（默认） */
}
/* 常用的flex值 */
.flex-equal {
flex: 1; /* 等分空间 */
}
.flex-fixed {
flex: 0 0 200px; /* 固定宽度，不增长不收缩 */
}
.flex-grow-only {
flex: 1 0 auto; /* 只增长，不收缩 */
}align-self - 单独对齐
点击展开示例
/* 单个项目的对齐方式 */
.align-self-container {
display: flex;
align-items: center; /* 容器默认居中对齐 */
height: 200px;
}
.align-self-start {
align-self: flex-start; /* 单独起始对齐 */
}
.align-self-end {
align-self: flex-end; /* 单独结束对齐 */
}
.align-self-center {
align-self: center; /* 单独居中对齐 */
}
.align-self-baseline {
align-self: baseline; /* 单独基线对齐 */
}
.align-self-stretch {
align-self: stretch; /* 单独拉伸对齐 */
}Flexbox实际应用示例
点击查看完整的Flexbox布局示例
/* 现代网页布局 */
.page-layout {
display: flex;
flex-direction: column;
min-height: 100vh;
}
/* 头部布局 */
.header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
height: 60px;
background-color: #2c3e50;
color: white;
}
.logo {
font-size: 1.5rem;
font-weight: bold;
}
.nav {
display: flex;
gap: 30px;
}
.nav-link {
color: white;
text-decoration: none;
transition: color 0.3s;
}
.nav-link:hover {
color: #3498db;
}
/* 主体内容布局 */
.main-layout {
display: flex;
flex: 1;
gap: 20px;
padding: 20px;
max-width: 1200px;
margin: 0 auto;
width: 100%;
}
.sidebar {
flex: 0 0 250px;
background-color: #f8f9fa;
padding: 20px;
border-radius: 8px;
}
.content {
flex: 1;
background-color: white;
padding: 30px;
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
/* 卡片网格 */
.card-grid {
display: flex;
flex-wrap: wrap;
gap: 20px;
margin-top: 30px;
}
.card {
flex: 1 1 calc(33.333% - 14px);
min-width: 280px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
transition: transform 0.3s ease;
}
.card:hover {
transform: translateY(-4px);
}
.card-image {
width: 100%;
height: 200px;
object-fit: cover;
}
.card-content {
padding: 20px;
}
.card-title {
margin: 0 0 10px 0;
font-size: 1.25rem;
font-weight: 600;
}
.card-text {
margin: 0 0 15px 0;
color: #666;
line-height: 1.6;
}
.card-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px 20px;
}
.card-price {
font-size: 1.5rem;
font-weight: bold;
color: #e74c3c;
}
.card-button {
padding: 8px 16px;
background-color: #3498db;
color: white;
border: none;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.card-button:hover {
background-color: #2980b9;
}
/* 页脚布局 */
.footer {
background-color: #34495e;
color: white;
padding: 40px 20px 20px;
}
.footer-content {
display: flex;
justify-content: space-between;
max-width: 1200px;
margin: 0 auto;
gap: 40px;
}
.footer-section {
flex: 1;
}
.footer-title {
margin-bottom: 15px;
font-size: 1.2rem;
font-weight: 600;
}
.footer-links {
display: flex;
flex-direction: column;
gap: 8px;
}
.footer-link {
color: #bdc3c7;
text-decoration: none;
transition: color 0.3s;
}
.footer-link:hover {
color: white;
}
.footer-bottom {
text-align: center;
margin-top: 30px;
padding-top: 20px;
border-top: 1px solid #4a5568;
color: #bdc3c7;
}
/* 响应式设计 */
@media (max-width: 768px) {
.header {
flex-direction: column;
height: auto;
padding: 15px;
gap: 15px;
}
.nav {
gap: 20px;
}
.main-layout {
flex-direction: column;
padding: 15px;
}
.sidebar {
flex: none;
order: 2; /* 移动端侧边栏放在内容后面 */
}
.content {
order: 1;
}
.card {
flex: 1 1 calc(50% - 10px);
min-width: 250px;
}
.footer-content {
flex-direction: column;
gap: 30px;
}
}
@media (max-width: 480px) {
.nav {
flex-direction: column;
gap: 10px;
text-align: center;
}
.card {
flex: 1 1 100%;
}
.card-footer {
flex-direction: column;
gap: 15px;
align-items: stretch;
}
.card-button {
width: 100%;
}
}<div class="page-layout">
<header class="header">
<div class="logo">我的网站</div>
<nav class="nav">
<a href="#" class="nav-link">首页</a>
<a href="#" class="nav-link">产品</a>
<a href="#" class="nav-link">关于</a>
<a href="#" class="nav-link">联系</a>
</nav>
</header>
<div class="main-layout">
<aside class="sidebar">
<h3>侧边栏</h3>
<p>这里是侧边栏内容</p>
</aside>
<main class="content">
<h1>主要内容</h1>
<p>这里是主要内容区域</p>
<div class="card-grid">
<div class="card">
<img src="product1.jpg" alt="产品1" class="card-image">
<div class="card-content">
<h3 class="card-title">产品标题1</h3>
<p class="card-text">产品描述信息...</p>
</div>
<div class="card-footer">
<span class="card-price">¥99</span>
<button class="card-button">购买</button>
</div>
</div>
<!-- 更多卡片... -->
</div>
</main>
</div>
<footer class="footer">
<div class="footer-content">
<div class="footer-section">
<h4 class="footer-title">公司信息</h4>
<div class="footer-links">
<a href="#" class="footer-link">关于我们</a>
<a href="#" class="footer-link">联系方式</a>
</div>
</div>
<!-- 更多页脚部分... -->
</div>
<div class="footer-bottom">
<p>© 2024 我的网站. 保留所有权利.</p>
</div>
</footer>
</div>响应式设计
响应式设计概念
响应式设计是一种网页设计方法，使网页能够在不同设备和屏幕尺寸上提供最佳的用户体验。
核心原则：
- 流式网格：使用相对单位而非固定像素
- 弹性图片：图片能够缩放适应容器
- 媒体查询：针对不同设备应用不同样式
视口设置
<!-- 必须的视口meta标签 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- 详细的视口设置 -->
<meta name="viewport" content="
width=device-width, <!-- 宽度等于设备宽度 -->
initial-scale=1.0, <!-- 初始缩放比例 -->
maximum-scale=5.0, <!-- 最大缩放比例 -->
minimum-scale=0.5, <!-- 最小缩放比例 -->
user-scalable=yes <!-- 允许用户缩放 -->
">媒体查询基础
/* 媒体查询基本语法 */
@media screen and (max-width: 768px) {
/* 屏幕宽度小于等于768px时的样式 */
.container {
padding: 10px;
}
}
@media screen and (min-width: 769px) {
/* 屏幕宽度大于等于769px时的样式 */
.container {
padding: 20px;
}
}
/* 范围查询 */
@media screen and (min-width: 768px) and (max-width: 1024px) {
/* 平板设备样式 */
.tablet-specific {
display: block;
}
}常用断点设置
/* 移动优先的断点系统 */
:root {
--breakpoint-xs: 480px; /* 超小屏幕 */
--breakpoint-sm: 768px; /* 小屏幕 */
--breakpoint-md: 1024px; /* 中等屏幕 */
--breakpoint-lg: 1200px; /* 大屏幕 */
--breakpoint-xl: 1400px; /* 超大屏幕 */
}
/* 基础样式（移动端） */
.responsive-container {
width: 100%;
padding: 15px;
margin: 0 auto;
}
/* 小屏幕及以上 */
@media (min-width: 768px) {
.responsive-container {
max-width: 750px;
padding: 20px;
}
}
/* 中等屏幕及以上 */
@media (min-width: 1024px) {
.responsive-container {
max-width: 970px;
padding: 30px;
}
}
/* 大屏幕及以上 */
@media (min-width: 1200px) {
.responsive-container {
max-width: 1170px;
}
}
/* 超大屏幕及以上 */
@media (min-width: 1400px) {
.responsive-container {
max-width: 1320px;
}
}响应式网格系统
/* 响应式网格系统 */
.grid {
display: flex;
flex-wrap: wrap;
margin: 0 -15px; /* 负边距抵消列的内边距 */
}
.col {
padding: 0 15px; /* 列的内边距 */
width: 100%; /* 移动端默认全宽 */
}
/* 小屏幕及以上 */
@media (min-width: 768px) {
.col-sm-1 { width: 8.333333%; }
.col-sm-2 { width: 16.666667%; }
.col-sm-3 { width: 25%; }
.col-sm-4 { width: 33.333333%; }
.col-sm-5 { width: 41.666667%; }
.col-sm-6 { width: 50%; }
.col-sm-7 { width: 58.333333%; }
.col-sm-8 { width: 66.666667%; }
.col-sm-9 { width: 75%; }
.col-sm-10 { width: 83.333333%; }
.col-sm-11 { width: 91.666667%; }
.col-sm-12 { width: 100%; }
}
/* 中等屏幕及以上 */
@media (min-width: 1024px) {
.col-md-1 { width: 8.333333%; }
.col-md-2 { width: 16.666667%; }
.col-md-3 { width: 25%; }
.col-md-4 { width: 33.333333%; }
.col-md-5 { width: 41.666667%; }
.col-md-6 { width: 50%; }
.col-md-7 { width: 58.333333%; }
.col-md-8 { width: 66.666667%; }
.col-md-9 { width: 75%; }
.col-md-10 { width: 83.333333%; }
.col-md-11 { width: 91.666667%; }
.col-md-12 { width: 100%; }
}
/* 大屏幕及以上 */
@media (min-width: 1200px) {
.col-lg-1 { width: 8.333333%; }
.col-lg-2 { width: 16.666667%; }
.col-lg-3 { width: 25%; }
.col-lg-4 { width: 33.333333%; }
.col-lg-5 { width: 41.666667%; }
.col-lg-6 { width: 50%; }
.col-lg-7 { width: 58.333333%; }
.col-lg-8 { width: 66.666667%; }
.col-lg-9 { width: 75%; }
.col-lg-10 { width: 83.333333%; }
.col-lg-11 { width: 91.666667%; }
.col-lg-12 { width: 100%; }
}响应式图片
点击展开示例
/* 基础响应式图片 */
img {
max-width: 100%;
height: auto;
display: block;
}
/* 响应式背景图片 */
.responsive-bg {
background-size: cover;
background-position: center;
background-repeat: no-repeat;
min-height: 300px;
}
@media (max-width: 768px) {
.responsive-bg {
min-height: 200px;
background-size: contain; /* 移动端显示完整图片 */
}
}
/* 艺术指导：不同屏幕显示不同图片 */
.hero-image {
width: 100%;
height: 400px;
background-image: url('hero-mobile.jpg');
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.hero-image {
height: 500px;
background-image: url('hero-tablet.jpg');
}
}
@media (min-width: 1200px) {
.hero-image {
height: 600px;
background-image: url('hero-desktop.jpg');
}
}响应式字体
点击展开示例
/* 响应式字体大小 */
:root {
--font-size-base: 16px;
--font-size-lg: 18px;
--font-size-xl: 20px;
}
body {
font-size: var(--font-size-base);
line-height: 1.6;
}
h1 {
font-size: 2rem; /* 32px */
}
h2 {
font-size: 1.75rem; /* 28px */
}
h3 {
font-size: 1.5rem; /* 24px */
}
@media (min-width: 768px) {
body {
font-size: var(--font-size-lg);
}
h1 {
font-size: 2.5rem; /* 40px */
}
h2 {
font-size: 2rem; /* 32px */
}
}
@media (min-width: 1200px) {
body {
font-size: var(--font-size-xl);
}
h1 {
font-size: 3rem; /* 48px */
}
h2 {
font-size: 2.25rem; /* 36px */
}
}
/* 流式字体（使用vw单位） */
.fluid-text {
font-size: calc(16px + 1vw); /* 基础16px + 视口宽度的1% */
}
/* 限制流式字体的最小和最大值 */
.fluid-text-limited {
font-size: clamp(16px, 4vw, 32px); /* 最小16px，最大32px */
}响应式导航
点击展开示例
/* 响应式导航菜单 */
.navbar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 20px;
background-color: #2c3e50;
color: white;
}
.navbar-brand {
font-size: 1.5rem;
font-weight: bold;
}
.navbar-nav {
display: flex;
list-style: none;
margin: 0;
padding: 0;
gap: 30px;
}
.navbar-link {
color: white;
text-decoration: none;
padding: 10px 0;
transition: color 0.3s;
}
.navbar-link:hover {
color: #3498db;
}
.navbar-toggle {
display: none;
background: none;
border: none;
color: white;
font-size: 1.5rem;
cursor: pointer;
}
/* 移动端导航 */
@media (max-width: 768px) {
.navbar {
flex-wrap: wrap;
}
.navbar-toggle {
display: block;
}
.navbar-nav {
display: none;
width: 100%;
flex-direction: column;
gap: 0;
margin-top: 20px;
}
.navbar-nav.active {
display: flex;
}
.navbar-link {
padding: 15px 0;
border-bottom: 1px solid #34495e;
}
.navbar-link:last-child {
border-bottom: none;
}
}媒体查询高级技巧
点击展开示例
/* 设备方向查询 */
@media (orientation: landscape) {
.landscape-only {
display: block;
}
}
@media (orientation: portrait) {
.portrait-only {
display: block;
}
}
/* 设备像素密度查询 */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
.high-dpi {
background-image: url('image@2x.png');
background-size: 100px 100px;
}
}
/* 用户偏好查询 */
@media (prefers-color-scheme: dark) {
body {
background-color: #1a1a1a;
color: #ffffff;
}
}
@media (prefers-reduced-motion: reduce) {
* {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
/* 悬停能力查询 */
@media (hover: hover) {
.hover-effect:hover {
transform: scale(1.05);
}
}
@media (hover: none) {
.touch-friendly {
padding: 15px; /* 触摸设备更大的点击区域 */
}
}
/* 指针精度查询 */
@media (pointer: coarse) {
.button {
min-height: 44px; /* 触摸设备最小点击区域 */
min-width: 44px;
}
}
@media (pointer: fine) {
.button {
min-height: 32px; /* 鼠标设备较小按钮 */
min-width: 32px;
}
}最佳实践
1. Flexbox最佳实践
点击展开示例
/* 使用gap属性代替margin */
.flex-container {
display: flex;
gap: 20px; /* 推荐：统一间距 */
}
/* 避免 */
.flex-item {
margin-right: 20px;
}
.flex-item:last-child {
margin-right: 0;
}
/* 使用flex简写属性 */
.flex-grow {
flex: 1; /* 推荐：简洁明了 */
}
/* 避免 */
.flex-verbose {
flex-grow: 1;
flex-shrink: 1;
flex-basis: 0%;
}
/* 合理使用flex-wrap */
.responsive-flex {
display: flex;
flex-wrap: wrap; /* 允许换行 */
gap: 20px;
}
.flex-item {
flex: 1 1 300px; /* 最小宽度300px */
}2. 响应式设计最佳实践
点击展开示例
/* 移动优先设计 */
.component {
/* 移动端样式（基础样式） */
padding: 15px;
font-size: 16px;
}
@media (min-width: 768px) {
.component {
/* 平板及以上的增强样式 */
padding: 20px;
font-size: 18px;
}
}
/* 使用相对单位 */
.container {
width: 100%;
max-width: 1200px;
padding: 0 5%; /* 相对内边距 */
margin: 0 auto;
}
/* 性能优化：避免不必要的媒体查询 */
.responsive-text {
font-size: clamp(16px, 4vw, 24px); /* 一行代码实现响应式 */
}
/* 而不是多个媒体查询 */3. 可访问性考虑
点击展开示例
/* 确保足够的对比度 */
.text {
color: #333; /* 深色文字 */
background-color: #fff; /* 浅色背景 */
}
/* 提供焦点指示器 */
.button:focus {
outline: 2px solid #007bff;
outline-offset: 2px;
}
/* 响应用户偏好 */
@media (prefers-reduced-motion: reduce) {
.animation {
animation: none;
}
}
/* 确保触摸目标足够大 */
@media (pointer: coarse) {
.touch-target {
min-height: 44px;
min-width: 44px;
}
}总结
本章我们深入学习了Flexbox弹性盒模型和响应式设计。Flexbox为现代网页布局提供了强大而灵活的解决方案，而响应式设计确保网页在各种设备上都能提供良好的用户体验。在下一章中，我们将学习CSS的高级特性，包括动画、变换和现代CSS技术。