移动端布局总结

一：viewport

• 概念

ViewPort<meta>标记用于指定用户是否可以缩放Web页面，如果可以，那么缩放到的最大最小缩放比例是什么。使用ViewPort<meta>标记还表示文档针对移动设备进行了优化。ViewPort<meta>标记的content值是有指令及其值组成的以逗号分隔的列表。

• 属性

1. width:控制viewport的宽度，可以指定一个值(数字)，也可以是device-width代表设备的宽度(单位为缩放为100%时的css的像素)
2. height: 控制viewport的高度，
3. initial-scale:初始缩放比例，也即是当页面第一次load的时候缩放比例
4. maximum-scale:允许用户缩放到的最大比例
5. minimum-scale:允许用户缩放到到最小比例
6. user-scalable:用户是否可以手动缩放
7. 完整的viewport标签:<meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no">

• rem，百分比，以及相关单位的应用

1. rem是基于根元素font-size大小的单位
2. 计算  1rem=16px(浏览器一般情况下默认字体大小为16px)，1px=0.0625rem=0.0625em ，10px=0.625rem=62.5%
3. 兼容：完全兼容ie8以上-------ie8以下将rem值计算为px值(引入rem.js)
4. 百分比布局：是相对于包含它的最近的父元素的高度和宽度，宽度用的比较少
5. vh,vm相对于视口的高度和宽度
6. vmin,vmax关于视口高度和宽度两者的最小值或者最大值(浏览器的宽度设置为1200px,高度设置为800px,1vmax=1200/100px=12px,1vmin=800/100px=8px)

二：弹性盒子

• 历史

1. 2009年，w3c提出了一种新的方案---Flex布局，可以简便,完整,响应式地实现各种页面布局。目前，它已经得到了浏览器的支持，这意味着，现在就能很安全的使用这项功能
2. 新版的Flexbox模型是2012年9月提出的工作草案，这个草案是由w3c推出的最新语法。这个版本励志于指定标准，让新式的浏览器全面兼容，在未来浏览器的更新换代中实现统一。

• 基本概念  

1. Flex是Flexble Box的缩写，意为"弹性布局"，用来为盒模型提供最大的灵活性
2. 任何一个容器都可以指定为Flex布局，而每一个弹性盒子中，采用flex布局的称为flex容器，他所有子元素称为flex项目
3. 两条轴线：水平主轴(主轴的开始位置叫做main start,结束位置叫做main end)   垂直交叉轴(交叉轴的开始位置叫做cross start,结束位置叫做cross end)

• 基本属性

(2):容器的基本属性(.box)

display:flex;//flex值表示弹性容器为块级，占用一行

• flex-direction   决定主轴的方向(给谁加谁就是主轴)

flex-direction:row;//默认从左往右，主轴为水平方向，起点在左端
flex-direction:row-reverse ;//主轴为水平方向，起点在右端。
flex-direction:column ;//主轴为垂直方向，起点在上沿。
flex-direction:column-reverse ;//主轴为垂直方向，起点在下沿

• flex-wrap    如果一条轴线排不下，如何换行

flex-wrap:nowrap;//不换行
flex-wrap:wrap;//换行
flex-wrap:wrap-reverse;(第一行在下面，第二行在上面)//换行
/*简写形式：flex-flow:flex-direction flex-wrap;把改变主轴和换行写在一起*/

• justify-content  定义了项目在主轴上对齐方式

justify-content:  定义了项目在主轴上的对齐方式
justify-content:flex-start;//左对齐
justify-content:flex-end;//右对齐
justify-content:center;居中
justify-content: space-between;//两端对齐
justify-content:space-around;

• align-item项目在交叉轴上如何对齐

align-items:flex-start;//上端
align-items: flex-end;//下端
align-items:center;//居中
align-items:stretch;//拉伸，高度拉到和容器的高度一样，不能给项目设置高度，才能使用此属性

• align-content  属性定义了多根轴线的对齐方式，如果项目只有一根轴线，该属性不起作用

align-content:flex-start;//与交叉轴的起点对齐。
align-content:center;//与交叉轴的中点对齐
align-content:flex-end;//与交叉轴的终点对齐。
align-content: space-between;//与交叉轴两端对齐，轴线之间的间隔平均分布
align-content:space-around;//每根轴线两侧的间隔都相等
align-content:stretch;//默认平铺，轴线占满整个交叉轴。

(二)项目的基本属性(.item)

• order  项目的排序循序，数值越小越靠前，默认值为0

order:1;//定义项目的排序顺序

• flex-grow 项目的放大比例，默认为0，如果是0的话即使有存在剩余空间，也不放大

flex-grow:2;//定义项目的放大比例

• flex-shrink 项目的缩小比例，默认为1，即如果空间不足，该项目将缩小

flex-shrink:2;//定义了项目的缩小比例

• flex-basis 伸缩基准值，该属性可以设置属性的宽

flex-basis:200px;//定义了在分配多余空间之前，项目占据的空间

• flex复合属性

flex:flex-grow,flex-shrink和flex-basis的简写;//默认值为flex:0 1 auto;

今天就分享到这了，see you ...