前端技术分享
0%

CSS 响应式设计

发表于 分类于

什么是响应式设计？

响应式设计让网站在不同设备上都有良好体验。

媒体查询

1
2
3
4
5
@media screen and (max-width: 768px) {
  .container {
    width: 100%;
  }
}

断点

常见断点：

  • 小屏幕：576px 以下
  • 中等屏幕：576px - 768px
  • 大屏幕：768px - 992px
  • 超大屏幕：992px 以上

流式布局

使用相对单位。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
.container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

.column {
  width: 100%;
}

@media (min-width: 768px) {
  .column {
    width: 50%;
  }
}

弹性图片

1
2
3
4
img {
  max-width: 100%;
  height: auto;
}

Flexbox 和 Grid

响应式布局的最佳选择。

1
2
3
4
5
6
7
8
.container {
  display: flex;
  flex-wrap: wrap;
}

.item {
  flex: 1 1 300px;
}

移动优先

从小屏幕开始设计。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
/* 移动端样式 */
.container {
  padding: 10px;
}

/* 平板样式 */
@media (min-width: 768px) {
  .container {
    padding: 20px;
  }
}

/* 桌面样式 */
@media (min-width: 1024px) {
  .container {
    padding: 30px;
  }
}

总结

响应式设计是现代 Web 开发必备。多用媒体查询和弹性布局。