移动端常见布局方式
流式布局（百分比布局）
流式布局，就是百分比布局，也称非固定像素布局。 通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。 流式布局方式是移动web开发使用的比较常见的布局方式。
注意事项
制作过程中，需要定义页面的最大和最小支持宽度。 max-width最大宽度（max-heigth最大高度） min-width最小宽度（min-heigth最小高度）
flex布局
操作方便，布局极为简单，移动端应用广泛 PC端浏览器支持情况较差 IE11或更低版本不支持或仅部分支持
布局原理
flex是flexible Box的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性，任何一个容器都可以指定为flex布局。
当我们为父盒子设为flex布局以后，子元素的float、clear和vertical1-align属性将失效。
flex布局=伸缩布局=弹性布局=伸缩盒布局=弹性盒布局
采用flex布局的元素，称为flex容器（flex container），简称“容器”。它的所有子元素自动称为容器成员，称为flex项目（flex item），简称“项目”。
父项常见属性
flex- direction 设置主轴的方向
在 fex 布局中，是分为主轴和侧轴两个方向，同样的叫法有：行和列、ⅹ轴和y轴
默认主轴方向就是 x 轴方向，水平向右默认侧轴方向就是 y 轴方向，垂直向下
flex-direction 属性決定主轴的方向（即项目的排列方向）
注意：主轴和侧轴是会变化的，就看flex- direction设置谁为主轴，剩下的就是侧轴。
而我们的子元素是跟着主轴来排列的
| 属性值 | 解释说明 |
|---|---|
| row | 默认值从左到右 |
| row-reverse | 从右到左 |
| column | 从上到下 |
| column-reverse | 从下到上 |
Justify-content 主轴上子元素排列方式
justify-content 属性定义了项目在主轴上的对齐方式
注意：使用这个属性之前一定要确定好主轴是哪个
| 属性值 | 解释说明 |
|---|---|
| flex-start | 默认值从头部开始如果主轴是轴，则从左到右 |
| flex-end | 从尾部开始排列 |
| center | 在主轴居中对齐（如果主轴是x轴则水平居中） |
| space-around | 平分剩余空间 |
| space-between | 先两边贴边再平分剩余空间（重要） |
flex-Wrap 设置子元素是否换行
默认情况下，项目都排在一条线（又称”轴线”）上。
flex-wrap 属性定义，flex 布局中默认是不换行的。
| 属性值 | 解释说明 |
|---|---|
| nowrap | 默认值，不换行 |
| wrap | 换行 |
align-items 侧轴上子元素排列方式（单行）
该属性是控制子项在侧轴（默认是 y 轴）上的排列方式
在子项为单项（单行）的时候使用
| 属性值 | 解释说明 |
|---|---|
| flex-start | 默认值从上到下 |
| flex-end | 从下到上 |
| center | 垂直居中 |
| stretch | 拉伸 |
align-content 侧轴上子元素排列方式（多行）
设置子项在侧轴上的排列方式并且只能用于子项出现换行的情况（多行），在单行下是没有效果的。
| 属性值 | 解释说明 |
|---|---|
| flex-start | 在侧轴的头部开始排列 |
| flex-end | 在侧轴的尾部开始排列 |
| center | 在侧轴中间显示 |
| space-around | 子项在侧轴平分剩余空间 |
| space-between | 子项在轴先分布在两头，再平分剩余空间 |
| stretch | 设置子项元素高度平分父元素高度 |
align-content 和 align-items 区别
align-items 适用于单行情況下，只有上对齐、下对齐、居中和拉伸
align-content 适应于换行（多行）的情況下（单行情況下无效），可以设置上对齐、下对齐、居中、拉伸以及平均分配剩余空间等属性值。
总结单行用 align-items 多行用 align-content
Flex-flow
fex-fow 属性是 flex-direction 和 flex-Wrap 属性的复合属性
flex-flow: row nowrap;
总结：flex 布局父项常见属性
以下由6个属性是对父元素设置的
flex-direction：设置主轴的方向
justify-content：设置主轴上的子元素排列方式
flex-wrap：设置子元素是否换行
align-content：设置侧轴上的子元素的排列方式（多行）
align-items：设置侧轴上的子元素排列方式（单行）
fex-fow：复合属性，相当于同时设置了 flex-direction 和 flex-wrap
子项常见属性
flex属性
flex 属性定义子项目分配父盒子的剩余空间，用 flex 来表示占多少份数
属性值为数字，数字为1, 表示占总份数中的1份。默认值为0.
.item{
flex:<number>;/*default 0*/
}
align-self 控制子项自己在侧轴上的排列方式
align-sef 属性允许单个项目有与其他项目不一样的对齐方式，可覆盖 align-items 属性。
默认值为 auto，表示继承父元素的 align-items 属性，如果没有父元素，则等同于stretch。
span: nth-child (2) {
/*设置自己在侧轴上的排列方式*/
align-self: flex-end；
}
Order 属性定义项目的排列顺序
数值越小，排列越靠前，默认为 0
注意：和 z-index 不一样
.item{
order:<number>;
}
rem布局
rem 单位
rem (root em）是个相对单位，类似于em, em是父元素字体
大小不同的是rem的基准是相对于<html>元素的字体大小。
比如，根元素（html）设置 font-size=12px；非根元素设置 width:2rem;转换成px表示就是 24px。
rem的优势：父元素文字大小可能不一致，但是整个页面只有一个<html>，可以很好的来控制整个页面的元素大小比例。
媒体查询
媒体查询（Media Query）是 CSS3 新语法
使用@media查询，可以针对不同的媒体类型定义不同的样式
@media可以针对不同的屏幕尺寸设置不同的样式
当你重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面
目前针对很多苹果手机、Android 手机，平板等设备都用得到多媒体查询
语法规范
用@media开头 注意@符号
mediatype媒体类型
关键字 and not only
media feature 媒体特性 必须有小括号包含
@media mediatype and|not|only (media feature){
CSS-Code
}
mediatype 媒体类型
将不同的终端设备划分成不同的类型，称为媒体类型
| 属性值 | 解释说明 |
|---|---|
| all | 用于所有设备 |
| 用于打印机和打印预览 | |
| screen | 用于电脑屏幕，平板电脑，智能手机等 |
关键字
关键字将媒体类型或多个媒体特性连接到一起做为媒体查询的条件。
and：可以将多个媒体特性连接到一起，相当于“且”的意思
not：排除某个媒体类型，相当于“非”的意思，可以省略。
or：可以测试多个媒体询的条件，只要有一个条件成立，就执行，“或”的意思。
only：指定某个特定的媒体类型，可以省略。
媒体特性
每种媒体类型都具体各自不同的特性，根据不同媒体类型的媒体特性设置不同的展示风格
我们暂且了解三个
注意他们要加小括号进行包含
| 属性值 | 解释说明 |
|---|---|
| width | 定义输出设备中页面可见区域的宽度 |
| min-width | 定义输出设备中页面最小可见区域宽度 |
| max-width | 定义输出设备中页面最大可见区域宽度 |
媒体査询+rem实现元素动态大小变化
rem 单位是跟着<html>来走的，有了rem页面元素可以设置不同大小尺寸
媒体询可以根据不同设备宽度来修改样式
媒体査询+rem 就可以实现不同设备宽度，实现页面元素大小的动态变化
rem 适配方案技术
按照设计稿与设备宽度的比例，动态计算并设置html根标签的font-size大小（媒体查询）。 CSS中，设计稿元素的宽、高、相对位置等取值，按照同等比例换算为rem单位的值。
| 技术方案1 | 技术方案2 |
|---|---|
| less | flexible.js |
| 媒体查询 | rem |
| rem |
rem 实际开发适配方案1
rem+媒体查询+less技术
设计稿常见尺寸宽度
| 设备 | 常见宽度 |
|---|---|
| iPhone 4.5 | 640px |
| iPhone 6.7.8 | 750px |
| Android | 320px、480px、540px、600px、720px、768px、800px、1080px 主流设备尺寸按照 1080px 设计 |
一般情況下，我们以一套或两套效果图适应大部分的屏幕，放弃极端屏或对其优雅降级，牺牲一些效果
现在基本以750为准。
动态设置 htm 标签 font-size 大小
假设设计稿是 750px
我们把整个屏幕划分为15等份（划分标准不ー可以是 20 份也可以是 10 等份）
每一份作为 html 字体大小，这里就是 50px
那么在 320px 设备的时候，字体大小为 320/15 就是 21.33px
用我们页面元素的大小除以不同的 htm 字体大小会发现他们比例还是相同的
比如我们以750为标准设计稿:
一个100 x 100像素的页面元素在750屏幕下，就是100/50 转换为rem 是2rem x 2rem 比例是 1 比 1
320 屏幕下，htm 字体大小为 21.33 则 2rem = 42.66px 此时宽和高都是 42.66 但是宽和高的比例还是1比1
元素大小取值方法
最后的公式：页面元素的rem值 = 页面元素值 (px) / (屏幕宽度/划分的份数)
屏幕宽度/划分的份数就是 html font-size 的大小
或者：页面元素的 rem 值=页面元素值（px) / html font-size 字体大小
rem 实际开发适配方案2
简洁高效的rem适配方案flexible.js
手机淘宝团队出的简洁高效移动端适配库
我们再也不需要在写不同屏幕的媒体査询，因为里面js做了处理
它的原理是把当前设备划分为 10 等份，但是不同设备下，比例还是一致的
我们要做的，就是确定好我们当前设备的html文字大小就可以了
比如当前设计稿是750px,那么我们只需要把html文字大小设置为75px(750px/10)
里面页面元素 rem值：页面元素的px值/75
剩余的，让flexible.js来去算
响应式布局
响应式需要一个父级做为布局容器，来配合子级元素来实现变化效果。
原理就是在不同屏幕下，通过媒体查询来改变这个布局容器的大小，再改变里面子元素的排列方式和大小，从而实现不同屏幕下，看到不同的页面布局和样式变化。
平时我们的响应式尺寸划分
超小屏（手机，小于 768pX）：设置宽度为 100%
小屏幕（平板，大于等于 768px）：设置宽度为 750px
中等屏幕（桌面显示器，大于等于 992px）：宽度设置为 970px
大屏幕（大桌面显示器，大于等于 1200px）：宽度设置为 1170px
但是我们也可以根据实际情况自己定义划分
bootstrap布局容器
Bootstrap 需要为页面内容和栅格系统包裹一个.container容器，它提供了两个作此用处的类。
- Container 类
响应式布局的容器固定宽度
大屏（>=1200p）宽度定为 1170px
中屏（>=992p）宽度定为 970px
小屏（>=768pX）宽度定为 750px
超小屏（100%)
- Container- fluid 类
流式布局容器百分百宽度
占据全部视口（viewport)的容器
适合于制作移动端页面开发
bootstrap栅格系统
栅格系统英文为"grid systems"也有人翻译为“网格系统”，它是指将页面布局划分为等宽的列，然后通过列数的定义来模块化页面布局。
Bootstrap 提供了一套响应式、移动设备优先的流式栅格系统，随着屏幕或视口（viewport）尺寸的增加，系统会自动分为最多 12 列。
栅格选项参数
栅格系统用于通过一系列的行（row）与列（column）的组合来创建页面布局，你的内容就可以放入这些创建好的布局中。
| 超小屏幕（手机）< 768px | 小屏设备（平板）>= 768px | 中等屏幕（桌面显示器）>=992px | 宽屏设备（大桌面显示器）>= 1200px | |
|---|---|---|---|---|
| container 最大宽度 | 自动（100%） | 750px | 970px | 1170px |
| 类前缀 | .col-xs- | .col-sm- | .col-md- | .col-lg- |
| 列(column)数 | 12 | 12 | 12 | 12 |
按照不同屏幕划分为 1~12 等份
行（row）可以去除父容器作用 15px 的边距
xs-extra small 超小；sm-small:小; md-medium：中等；lg-large：大；
列（column）大于 12, 多余的“列（column)“所在的元素将被作为一个整体另起一行排列
每一列默认有左右 15 像素的 padding
可以同时为一列指定多个设备的类名，以便划分不同份数例如 class="col-md-4 col-sm-6"
列嵌套
栅格系统内置的柵格系统将内容再次嵌套。简单理解就是一个列内再分成若干份小列。我们可以通过添加一个新的.row元素和一系列.col-sm-*元素到已经存在的.col-sm-*元素内。
<!-列嵌套->
<div class="col-sm-4">
<div class="row">
<div class="col-sm-6">小列</div>
<div class="col-sm-6">小列</div>
</div>
</div>
列偏移
使用.col-md-offset-类可以将列向右侧偏移。这些类实际是通过选择器为当前元素增加了左侧的边距（margin）。
<!- 列偏移 ->
<div class="row">
<div class="col-lg-4">1</div>
<div class="col-lg-4 col-lg-offset-4">2</div>
</div>
列排序
通过使用.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>
响应式工具
为了加快对移动设备友好的页面开发工作，利用媒体查询功能，并使用这些工具类可以方便的针对不同设备展示或隐藏页面内容。
| 类名 | 超小屏 | 小屏 | 中屏 | 大屏 |
|---|---|---|---|---|
| hidden-xs | 隐藏 | 可见 | 可见 | 可见 |
| hidden-sm | 可见 | 隐藏 | 可见 | 可见 |
| hidden-md | 可见 | 可见 | 隐藏 | 可见 |
| hidden-lg | 可见 | 可见 | 可见 | 隐藏 |
与之相反的，visible-xs、visible-sm、visible-md、visible-lg是针对不同设备显示某个内容。
