响应式开发就是利用媒体查询为不同宽度的设备设置布局和样式，以适应不同的设备。响应式需要父级作为布局容器。通过媒体查询改变布局容器的大小，进而改变里面的子元素的排列方式和大小，这样在不同的屏幕尺寸下可以看到不同的页面布局和样式变化。常见的响应大小划分：超小屏（手机，小于768px）：设置宽度为100%小屏（平板，大于等于768px）：设置宽度为750px中屏（桌面显示器，大于orequalto992px):setthewidthto970pxlargescreen(大桌面显示，大于等于1200px):设置宽度为1170px@mediascreenand(max-width:767px){.container{width:100%;}}@mediascreenand(min-width:768px){.container{width:750px;}}@mediascreenand(min-width:992px){.container{width:970px;}}@mediascreenand(min-width:1200px){.container{width:1170px;}}响应式开发，可以使用Bootstrap框架，可以让我们的开发更加方便。Bootstrap官网Bootstrap中文官网
