移动端入门+box-flex

头部标签详解

1.编码必须为utf-8编码；

<meta

http-equiv="Content-type"

content="text/html; charset=utf-8"

/>

2.可视区域viewport，移动端特有的属性

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />

inital-scale表示的初始的缩放比例，当即是当页面第一次load的时候缩放比例.一般设置为1.0倍。

minimum-scale=1.0表示的允许用户缩放的最小比例。

maximum-scale=1.0表示的允许用户缩放的最大比例。

user-scalable=yes/no表示是否支持用户手动进行缩放，默认为yes，一般设置为no。

3. IOS的特有属性

<meta

name="apple-mobile-web-app-capable"

content="yes"

/>

是否启动webapp功能。说通俗一点。就是当点击网页添加至主屏幕功能时，会在主屏幕上生成一个图标。点击该图标会进入webapp功能。就是模拟本地应用的模式来浏览web页面。生成的图标可以自定义，启动webapp时的开始时的图片也可以定义。这个是link标签的作用，我会在介绍link标签时，单独进行说明。

<meta

name="apple-mobile-web-app-status-bar-style"

content="black"

/>

当启动webapp功能时，显示手机信号、时间、电池的顶部导航栏的颜色。默认值为default（白色），可以定为black（黑色）和black-translucent（灰色半透明）。这个主要是根据实际的页面设计的主体色为搭配来进行设置。

CSS3属性：box-flex，弹性盒模型，移动端很实用主要让子容器针对父容器的宽度按一定规则进行划分

它的出现可以解决我们通过N多结构、css实现的布局方式。经典的一个布局应用就是布局的垂直等高、水平均分、按比例划分；

目前box-flex属性还没有得到firefox、Opera、chrome浏览器的完全支持，但可以使用它们的私有属性定义firefox(-moz-)、opera(-o-)、chrome/safari（-webkit-)；

用法：其父元素必须定义为display:box;属性，其子元素

box-flex: value。value是要分为的分数。

如：

css代码：

*{margin: 0; padding: 0;}

html,body{height: 100%; margin: 0;}

li{list-style-type: none;}

.wrapper{

width: 100%;

display:-moz-box; //父元素定义为弹性布局

display:-webkit-box;

display:box;

/**定义子级分布类型：默认为水平显示inline-axis或者horizontal，垂直显示：block-axis或者vertical**/

box-orient:horizontal;

-moz-box-orient:horizontal;

-webkit-box-orient:horizontal;

/**定义子级摆列方向：块级元素默认显示为从上到下，行内元素默认显示为从左到右。反向排列属性reverse **/

-moz-box-direction:reverse;

-webkit-box-direction:reverse;

box-direction:reverse;

}

.item01{

background: #e2e2e2;

box-flex:2;

-webkit-box-flex:2;

-moz-box-flex:2;

/*将子元素划分组（默认是按照元素先后顺序来显示的，有了这属性，就从属性值的从小到大排列显示）*/

-moz-box-ordinal-group:1;

-webkit-box-ordinal-group:1;

box-ordinal-group:1;

}

.item02{

background: #330;

box-flex:3;

-webkit-box-flex:3;

-moz-box-flex:3;

/*将子元素划分组（默认是按照顺序来显示的，从小到大）*/

-moz-box-ordinal-group:3;

-webkit-box-ordinal-group:3;

box-ordinal-group:3;

}

.item03{

background: #f30;

box-flex:1;

-webkit-box-flex:1;

-moz-box-flex:1;

/*将子元素划分组（默认是按照顺序来显示的，从小到大）*/

-moz-box-ordinal-group:2;

-webkit-box-ordinal-group:2;

box-ordinal-group:2;

}

html代码：

<ul class="wrapper">

<li class="item01">11111</li>

<li class="item02">22222</li>

<li class="item03">333333</li>

</ul>

表示box里的内容总共分为3份，item1的宽度为100%的2/3,item2的宽度为100%的1/3