响应式开发

布局

1. 固定宽度布局

2. 流式布局 为网页色设置一个相对宽度 通常以百分比为长度单位

3. 栅格化布局 人为划分均等长度 如bootstrap

4. 响应式布局 通过检查设备信息 决定网页布局方式

响应式开发

原理 媒体查询

屏幕尺寸不一样 展示 给用户 网页内容也不一样

通过媒体查询可以检查屏幕尺寸 并设置不同css样式 实现响应式布局

缺点

速度可能会变慢 由于响应式页面是同时下载多套CSS样式代码

实现方式

@media mediatype and | not | only (media feature){
    Css-Code
}
/* 不同媒体使用不同 stylesheets */
<link rel="stylesheet" media="mediatype and | not | only (media feature)" href="xxx.css"/>

mediatype：

1. all 所有
2. print 打印机
3. screen 电脑 平板 智能手机
4. speech 屏幕阅读器

media feature:

例如

<style>
	/*屏幕宽度小于768px*/
	@media screen and (max-width:768px){
    
	}
</style>

<style>
	/*屏幕宽度768~992*/
	@media screen and (min-width:768px) and (max-width:992px){
    
	}
</style>

当判断最小的值 并且从小到大进行判断（当满足条件的条件的时候）

1. 向上兼容 如果设置了宽度更小的样式 默认这些样式也会传递到宽度更大的条件范围内
2. 向下覆盖 宽度更大的样式会将前面宽度更小的样式覆盖

建议书写:

1. 如果是判断最小值 应该从小到大写
2. 如果是判断最大值 应该从大到小写

//代码取例  如果是`判断最小值`  `应该从小到大写`
//< 768
body{
}
//768-992
@media screen and (min-width:768px){
}
//992-1200
@media screen and (min-width:992px){
}
//>1200
@media screen and (mix-width:1200px)
}

//支持最小值 不支持最大值

Bootstrap栅格系统

列偏移

offset偏移（原理 margin-left）

举例 col-xs-offset-2

偏移的距离是以栅格为单位

但是这种偏移是直接影响后面的元素

有可能造成后面的元素换行显示

列排序

push(往后 右推)/pull (往前 左拉) （原理 定位）

举例 col-xs-push-2

不会影响其他元素 但是有可能和其他元素重叠

嵌套列

<div class="row">
  <div class="col-sm-9">
  <!--设置container样式  row下面宽度就会和container所设置高度一致-->
    <!--<div class="container">-->
     <div class="row">
      <div class="col-xs-8 col-sm-6">

      </div>
      <div class="col-xs-4 col-sm-6">

      </div>
     </div>
    <!--</div>-->
  </div>
</div>