web移动端-3-响应式布局

也要标准视口：

屏幕尺寸分类

媒体查询： @media

举例：
需求：

实现：

上面如果网页元素过多，就非常麻烦，可以利用bootstrap快速开发响应式

响应式开发框架 – bootstrap

html+css+js 的 集合

兼容问题 及 项目中的引用

参考：https://blog.csdn.net/u012238748/article/details/54573745
自从推出了Bootstrap3以后，整个框架对于低级浏览器的兼容性更是不忍直视，所以如果你的项目牵涉到IE8、IE7，甚至是IE6，那么就可以好好考虑是否还要执着于Bootstrap3了（当然，Bootstrap2相对而言会更加适合这种情况）。
不过如果你是跟随时代潮流的前端工程师，而且恰巧你的客户也推崇更为先进的前端技术，那么恭喜你，Bootstrap3肯定不会让你失望。

• CSS3属性在IE8以及IE9中的兼容性表现
  IE兼容模式带来的问题
  很多在XP中升级到IE8的用户会发现一些布局或者交互的问题，其实这是由于Bootstrap并不支持IE的兼容模式，为了解决这个问题，我们需要在head中引入以下meta标签。

<meta http-equiv="X-UA-Compatible" content="IE=edge”>

这个标签能够确保你的每个页面能够在兼容模式下正常地被渲染。

bootstrap依赖于jQuery

normalize.css 与 reset.css

基本样式

所有?元素都有个padding = 15 px

container

此时 响应式布局容器的宽度设置与前面的是一样的：

栅格系统

若为：

超出12， col-lg-5会往下挪
不可能超出12，否则不生效。

• 应用：
  需求：
  
  代码实现：
  
  
  
  
• 嵌套应用