css响应式布局

css响应式布局:

• 定义：
  不同设备屏幕大小变化，页面布局也发生变化
• 原理：
  使用媒体查询，对不同设备进行布局和样式的设置，从而做到适配
• 响应式布局容器：
  在不同屏幕下，通过媒体查询来改变这个父级布局容器（一般是container）大小，再改变子元素排列方式和大小；实现不同设备屏幕，能看到不同布局样式
• 屏幕设备划分：

两侧留白会更好看
maegin:0 auto是居中显示

• 框架：
  一套架构，一套完整的网页功能解决方案，控制权仅在框架本身，有预制样式库，组件和插件
• 版本区别：

2.xx:停止维护，兼容性好，代码不够简洁，功能不够完善
3.xx:稳定，但不支持ie6-ie7，对ie8支持但界面效果不好，偏向于开发响应式布局，移动设备优先的web
4.xx:最新，但不流行

• 使用：
  新建一个bootstrap的文件夹，把下载解压的东西放进去，再引入
• html骨架结构：

<!--要求当前网页使用IE浏览器最高版本的内核来渲染-->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!--视口的设置：视口的宽度和设备一致，默认的缩放比例和PC端一致，用户不能自行缩放-->
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">
<!-- [if lt IE 9]>
<!--解决ie9一下浏览器对html5新增标签的不识别，并导致CSS不起作用的问题-->
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<!--解决ie9以下浏览器对css3 Media Query的不识别-->
<script src="http://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->

• 布局容器：container类，Bootstrap预先定义好了这个类，叫.container

响应式布局容器 固定宽度
大屏（>=1200px）宽度为1170px
大屏（>=992px）宽度为970px
大屏（>=768px）宽度为750px
超小屏（100%）