在移动互联网的时代，为了让网站的与时俱进，满足时下多屏幕时代，让一个PC端的页面去适配一个多端口的设备是非常有必要的，此时，就需要考虑到使用框架技术去实现响应式布局，帮助实现一个程序适配多个端口的操作。
那么就先来看看响应式开发吧。大家熟知的框架-bootstrap。它的最大的特点就是可以快速应用到响应式开发，其原理就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
什么是bootstrap：
Bootstrap 来自 Twitter（推特网站），是目前最受欢迎的前端框架。Bootstrap 是基于HTML、CSS 和 JavaScript 的，它简洁灵活，使得 Web 开发更加快捷。
设备的划分情况：
l 小于768的为超小屏幕（手机）
l 768~992之间的为小屏设备（平板）
l 992~1200的中等屏幕（桌面显示器）
l 大于1200的宽屏设备（大桌面显示器）
响应式布局容器：
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
父容器版心的尺寸划分：
l 超小屏幕（手机，小于 768px）：设置宽度为 100%。
l 小屏幕（平板，大于等于 768px）：设置宽度为 750px。
l 中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px。
l 大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px 。
提示：也可以根据实际情况自己定义划分
参考指导文档：
l 官网：http://getbootstrap.com/
Bootstrap优点：
l 标准化的html+css编码规范。
l 提供了一套简洁、直观、强大的组件。
l 有自己的生态圈，不断的更新迭代。
l 让开发更简单，提高了开发的效率。
版本介绍：
l 2.x.x：停止维护,兼容性好,代码不够简洁，功能不够完善。
l 3.x.x：目前使用最多,稳定,但是放弃了IE6-IE7。对 IE8 支持，但是界面效果不好,偏向于开发响应式布局、移动设备优先的WEB 项目。
l 4.x.x：最新版，目前还不是很流行。
那么响应式开发的核心原理即媒体查询。
查询媒介：
（1）查询到当前屏幕（媒介媒体-设备）的宽度。
（2）对不同的屏幕宽度设置不同的样式来适应不同屏幕。
（3）当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。
（4）通过设置不同屏幕下的不同样式，达到适配不同的屏幕的目的。
注意：
l 条件之间必须有空格，条件之间可以用and进行关联。
l 媒体查询的条件判断的向上兼容和向下兼覆盖。
l 判断最大值的书写顺序：从大到小写
以上是我们对媒体查询的基本认识，如有更深的研究的，可以与我们一起探讨哦！
未经允许不得转载：跨屏互联 » 深度解读跨屏响应式框架Bootstrap原理
