一：响应式开发
就是使用媒体查询针对不同宽度的设备进行布局和样式的设置，从而适配不同设备的目的。
| 屏幕划分 | 尺寸区间 | 平时设置 |
|---|---|---|
| 超小屏幕（手机) | <768px | 100% |
| 小屏设备（平板） | >=768px~ < 992px | 750px |
| 中等屏幕（(桌面显示器) | >= 992px~ <1200px | 970px |
| 宽屏设备(大桌面显示器) | >= 1200px | 1170px |
1.1：响应式布局容器
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
媒体查询——>布局容器大小——>子元素的排列的大小
不同屏幕不同样式
二：Bootstrap框架
概念(百度)：提供了html+css编码规范；提供了一套简洁、直观、强悍的组件；有自己的生态圈，不断的更新迭代；让开发更简单，提高了开发的效率
快速开发：Bootstrap前端开发框架
移动端，响应式
下载bootstrap
1：
2：
3：
4：
【叽叽哇哇】bootstrap肯定有其他的功能，但我还不会，以后再补充
2.1：bootstrap的使用
- 创建文件夹结构
- 创建html骨架，引入文件（bootstrap的，css的，其他等等需要引入的）（官网有代码，也可去那里复制）
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
<title>Bootstrap 101 Template</title>
<!-- Bootstrap -->
<link rel="stylesheet" href="./bootstrap/css/bootstrap.min.css">
<!-- HTML5 shim 和 Respond.js 是为了让 IE8 支持 HTML5 元素和媒体查询（media queries）功能 -->
<!-- 警告：通过 file:// 协议（就是直接将 html 页面拖拽到浏览器中）访问页面时 Respond.js 不起作用 -->
<!--[if lt IE 9]>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/html5shiv.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dest/respond.min.js"></script>
<![endif]-->
</head>
- 书写内容
直接拿Bootstrap 预先定义好的样式来使用
修改Bootstrap 原来的样式，注意权重问题
学好Bootstrap 的关键在于知道它定义了哪些样式，以及这些样式能实现什么样的效果
2.2：布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个 .container 容器，它提供了两个作此用处的类。
- container类
·响应式布局的容器固定宽度
·大屏( >=1200px)宽度定为1170px
·中屏(>=992px)宽度定为970px
·小屏(>=768px)宽度定为750px
·超小屏(100%) - container-fluid类
·流式布局容器百分百宽度
·占据全部视口(viewport)的容器。
·适合单独做移动开发
2.3：栅格系统:系统将页面划分成等宽的列
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多12列
① 行（row）列（column）
| 超小屏幕(手机) <768px | 小屏设备(平板) >=768px | 中等屏幕(桌面显示器)>=992px | 宽屏设备(大桌面显示器)>=1200px | |
|---|---|---|---|---|
| xs-extra small | sm-small | md-medium | lg-large | |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
-
每一列默认有左右15px的padding
-
列大于12，多余的列所在的元素将被作为一个整体，另起一行排列
-
列大于12，少的列所在的元素，有空白
-
可以同时为一列指定多个设备的类名，以便划分不同份数
<div class="col-sm-1 col-md-8">3</div>
- 样式向上兼容
② 列嵌套
栅格系统内置的栅格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的 .row 元素和一系列 .col-sm-* 元素到已经存在的 .col-sm-* 元素内。
【叽叽歪歪】列嵌套加个行，去掉父元素的padding值，而且高度自动和父级一样高
③ 列偏移
使用 .col-md-offset-类可以将列向右侧偏移。这些类实际是通过使用选择器为当前元素增加了左侧的边距（margin）。
- 代码
- 运行结果
- 【叨叨草图】
只可以向右，并且会有影响
④ 列排序
通过使用 .col-md-push-和 .col-md-pull-类就可以很容易的改变列（column）的顺序。
<!-- 列排序 -->
<div class="row">
<div class="col-lg-4 col-lg-push-8">左侧</div>
<div class="col-lg-8 col-lg-pull-4">右侧</div>
</div>
2.4：响应式布局
| 类名 | 超小 | 小 | 中 | 大 |
|---|---|---|---|---|
| .hidden-xs | × | √ | √ | √ |
| .hidden-sm | √ | × | √ | √ |
| .hidden-md | √ | √ | × | √ |
| .hidden-lg | √ | √ | √ | × |
- √ 可见 × 不可见
- visible-xs，visible-sm，visible-md，visible-lg刚好与上面的相反
【叨叨】移动布局 over ❀