移动端入门+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
郑重声明:本站内容如果来自互联网及其他传播媒体,其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享,并不代表本站赞同其观点和对其真实性负责,也不构成任何其他建议。