Appearance
响应式布局
概述
响应式布局是指页面能够根据不同的屏幕尺寸和设备特性自动调整布局，提供最佳的用户体验。
响应式设计原则
1. 移动优先
css
/* 移动端样式（默认） */
.container {
width: 100%;
padding: 16px;
}
/* 平板及以上 */
@media (min-width: 768px) {
.container {
width: 750px;
margin: 0 auto;
}
}
/* 桌面 */
@media (min-width: 1024px) {
.container {
width: 960px;
}
}2. 流式布局
css
.container {
width: 100%;
max-width: 1200px;
margin: 0 auto;
padding: 0 16px;
}
.column {
float: left;
width: 100%;
}
@media (min-width: 768px) {
.column {
width: 50%;
}
}
@media (min-width: 1024px) {
.column {
width: 33.333%;
}
}3. 弹性布局
css
.flex-container {
display: flex;
flex-wrap: wrap;
gap: 16px;
}
.flex-item {
flex: 1 1 300px; /* 最小宽度 300px */
max-width: 100%;
}媒体查询
1. 断点设置
css
/* 手机 */
@media (max-width: 575px) { }
/* 平板竖屏 */
@media (min-width: 576px) and (max-width: 767px) { }
/* 平板横屏 */
@media (min-width: 768px) and (max-width: 991px) { }
/* 桌面 */
@media (min-width: 992px) and (max-width: 1199px) { }
/* 大屏 */
@media (min-width: 1200px) { }2. 设备方向
css
/* 横屏 */
@media (orientation: landscape) { }
/* 竖屏 */
@media (orientation: portrait) { }3. 分辨率
css
/* 高分辨率屏幕 */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
/* 高清图片 */
.logo {
background-image: url('logo@2x.png');
}
}CSS Grid 响应式
1. 自适应列数
css
.grid-container {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 16px;
}2. 响应式网格
css
.grid-container {
display: grid;
grid-template-columns: 1fr;
grid-template-areas:
"header"
"main"
"sidebar"
"footer";
}
@media (min-width: 768px) {
.grid-container {
grid-template-columns: 1fr 3fr;
grid-template-areas:
"header header"
"sidebar main"
"footer footer";
}
}
@media (min-width: 1024px) {
.grid-container {
grid-template-columns: 1fr 3fr 1fr;
grid-template-areas:
"header header header"
"sidebar main aside"
"footer footer footer";
}
}响应式图片
1. srcset 属性
html
<img
src="image-400.jpg"
srcset="
image-400.jpg 400w,
image-800.jpg 800w,
image-1200.jpg 1200w
"
sizes="(max-width: 600px) 400px,
(max-width: 1000px) 800px,
1200px"
alt="响应式图片"
>2. picture 元素
html
<picture>
<source media="(min-width: 1024px)" srcset="image-large.jpg">
<source media="(min-width: 768px)" srcset="image-medium.jpg">
<img src="image-small.jpg" alt="响应式图片">
</picture>3. CSS 背景图片
css
.hero {
background-image: url('image-small.jpg');
background-size: cover;
background-position: center;
}
@media (min-width: 768px) {
.hero {
background-image: url('image-medium.jpg');
}
}
@media (min-width: 1024px) {
.hero {
background-image: url('image-large.jpg');
}
}响应式字体
1. 视口单位
css
.title {
font-size: calc(16px + 2vw);
}
@media (min-width: 1200px) {
.title {
font-size: 40px;
}
}2. clamp() 函数
css
.title {
font-size: clamp(16px, 4vw, 32px);
}3. 响应式排版
css
html {
font-size: 16px;
}
@media (min-width: 768px) {
html {
font-size: 18px;
}
}
@media (min-width: 1024px) {
html {
font-size: 20px;
}
}最佳实践
1. 布局策略
- 使用 CSS Grid 和 Flexbox
- 避免固定宽度
- 使用相对单位
2. 性能优化
- 图片懒加载
- 响应式图片
- 按需加载资源
3. 测试
- 多设备测试
- 浏览器测试
- 真实设备测试