CSS Examples and Source Code for Responsive Web Design

一、什么是响应式设计

响应式设计是指网页能够根据不同终端、不同屏幕尺寸下的显示设备，具有自适应的特点。在不同的屏幕大小、分辨率或设备类型上，页面能够以最佳方式显示，具有更好的可用性和用户体验。响应式设计的出现，解决了屏幕尺寸不同所带来的显示不全或失真等问题，也让设计师和开发者实现了一站式设计，即一套代码适配多个终端。

二、如何实现响应式设计

实现响应式设计通常需要使用媒体查询、弹性网格布局、图片相对尺寸和弹性容器等技术。其中媒体查询是一种基于媒体类型、浏览器视口大小等条件来判断并加载样式的方法。通过设置不同的CSS规则和样式表，我们可以针对不同的屏幕尺寸、分辨率或设备类型，设置不同的样式。

弹性网格布局(Flexible Grid Layout)是指页面布局中，容器和栅格的尺寸可以根据屏幕尺寸自适应而变化的布局方式。通过使用弹性容器和栅格的class类，可以方便地控制页面内容的布局形式，并实现页面在不同屏幕尺寸下的自适应。同时，在响应式设计中使用的相对尺寸，包括百分比、em、rem等，也是实现响应式设计的重要手段，相对尺寸的使用，让页面可以根据相对尺寸自适应地缩放，从而实现在不同屏幕上的自适应。

最后，响应式设计还需要使用媒体查询和CSS3的一些新属性，比如Media Features, Flexbox, Grid等技术，这些技术在实现响应式设计时，可以提供更多的样式和布局方式。

三、CSS示例和代码

/*弹性容器和栅格*/
.flex-container {
  display: flex;
  flex-wrap: wrap;
}

.flex-container > div {
  flex-grow: 1;
  height: 100px;
}

/*媒体查询*/
@media screen and (max-width: 600px) {
  .flex-container > div {
    flex-basis: 50%;
  }
}

@media screen and (max-width: 400px) {
  .flex-container > div {
    flex-basis: 100%;
  }
}

/*Flexbox*/
.container {
  display: flex;
  flexDirection: row;
  justifyContent: space-between;
}

.item {
  flex: 1;
}

/*Grid*/
.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-gap: 10px;
}

.item {
  background-color: #d23;
  border-radius: 3px;
  color: #fff;
  font-size: 20px;
  padding: 10px;
  text-align: center;
  height: 100px;
}