缩放精灵图
屏幕缩小话 背景突变也要通过background
视口的高度和宽度
单位是vw 视口宽度 vh 视口高度
响应式开发原理：
使用媒体查询针对不同宽度的设备进行布局和样式进行设置，从而适配不同的设备。
设备的划分情况：
小于768px 为超小屏幕 就是手机
768px到992px 小屏幕设备
992到1200px 的时候 中等屏幕设备 桌面显示器
大于1200px 超大屏幕 大桌面显示器
版心尺寸划分
小于758 版心为100%
小屏幕 版心为750px
中等屏幕 970px
超大屏幕用1170px
bootstrap
标准话的html和css文件
提供一套简介、直观、强大的组件
有自己的生态圈
让开发会更简单，提高我们的效率
版本简介：
2.x.x 停止维护，兼容性不好，但是代码不够简洁，功能不完善
3.x.x 目前使用的最多，稳定，但是放弃了ie6和ie7，ie8支持，但是洁面效果不好，偏向开发响应式布局、移动设备优先的web项目。
bootstrap
现阶段我们还没有接触js相关内容，所以只考虑使用它的样式库
创建文件 将bootstrap的代码，将bootstrap的代码放到相应的文件夹中
引入bootstrap 。min。css
bootstrap的栅格系统
bootstrap的布局容器：
他为页面内容和栅格系统报过了一个。continer 和container-fluid
container 响应式布局的容器，固定宽度
大屏 屏幕宽度》1200px 宽度为1170px
中屏 屏幕宽度 >992px 宽度是970px
小屏 屏幕宽度>768px 宽度为750px
超小屏幕 宽度设定为100%
container 流式布局的容易，百分百宽度
占据全部视口
注意：container和container-fluid都增加了15px 的内边距
bootstrap的栅格系统的使用
屏幕或者视口的尺寸增加 屏幕会最多分配12列的栅格。
栅格系统通过一系列的行与列 的组合来创建页面布局，我们的内容就可以写在这些创建好的布局中
1、按照不同的屏幕划分1-12等分，如果想去掉padding，给父容器加row即可
2、xs-etra-small 超小屏幕 sm-small 小屏幕 md-media 中等屏幕 lg-lage 大屏
分数不够 最后面留白
份数超过的盒子换行显示
栅格的列嵌套
是容器也是项目
列偏移：
offset
列排序
.contaimer最大宽度
bootstrap在不同请下控制元素的显示和隐藏
.hidden-xs最小屏幕下隐藏
.hidden -sm 小屏幕下隐藏
.hidden-md 中屏幕下隐藏
.hidden-lg 大屏幕下隐藏
.visible-xs 只在最小屏幕下显示
.visible -sm 只在小屏幕下显示
.visible-md 只在中屏幕下显示
.visible-lg 只在大屏幕下显示
|
