响应式开发

响应式开发就是使用媒体查询针对不同宽度的设备进行布局和样式设置，从而适配不同设备。

响应式需要一个父级作为布局容器，通过媒体查询改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕尺寸下，看到不同的页面布局和样式变化。

常见的响应式尺寸划分：

• 超小屏幕（手机，小于 768px）： 设置宽度为 100%
• 小屏幕（平板，大于等于 768px）： 设置宽度为 750px
• 中等屏幕（桌面显示器，大于等于 992px）： 设置宽度为 970px
• 大屏幕（大桌面显示器，大于等于 1200px）： 设置宽度为 1170px

  @media screen and (max-width: 767px) {
    .container {
      width: 100%;
    }
  }

  @media screen and (min-width: 768px) {
    .container {
      width: 750px;
    }
  }

  @media screen and (min-width: 992px) {
    .container {
      width: 970px;
    }
  }

  @media screen and (min-width: 1200px) {
    .container {
      width: 1170px;
    }
  }

响应式开发，可以使用 Bootstrap 框架，能使我们的开发更加便捷。

• Bootstrap 官网
• Bootstrap 中文官网