移动端常见布局方式

流式布局（百分比布局）

流式布局，就是百分比布局，也称非固定像素布局。通过将盒子的宽度设置成百分比，从而根据屏幕的宽度来进行伸缩，不受固定像素的限制，内容向两侧填充。流式布局方式是移动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	用于所有设备	print	用于打印机和打印预览	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是针对不同设备显示某个内容。