9月开发总结

1.html5启动动画：

<link rel="apple-touch-startup-image" href="/startup.png">
通过media来控制横屏和竖屏启动动画：
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device- 320px)" rel="apple-touch-startup-image" />

// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device- 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPhone 5
<link rel="apple-touch-startup-image" media="(device- 320px) and (device-height: 568px) and (-webkit-device-pixel-ratio: 2)" href="apple-touch-startup-image-640x1096.png">

// iPad portrait
<link href="apple-touch-startup-image-768x1004.png" media="(device- 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />

// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device- 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />

// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device- 1536px) and (orientation: portrait) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />

// iPad Retina landscape
<link href="apple-touch-startup-image-1496x2048.png"media="(device- 1536px) and (orientation: landscape) and (-webkit-device-pixel-ratio: 2)"rel="apple-touch-startup-image" />

2.移动端布局及技巧

(1).水平垂直居中-translate：
{
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate(-50%, -50%);
transform: translate(-50%, -50%);
}

(2)水平垂直居中-flex：

.flex-center {
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
align-items: center;
}

(3)table布局-table-layout: fixed：

.table-equal {
display: table;
table-layout: fixed;
100%;
}
.table-equal li {
display: table-cell;
}

(4)table布局-tr、td

html,body{
100%;
height: 100%;
}
.lay-table{
100%;
height: 100%;
display: table;
border-collapse: collapse;
font-size: .16rem;
text-align: center;
}
.tr{
display: table-row;
}
.td{
display: table-cell;
}
.header-t,.footer-t{
height: .4rem;
line-height: .4rem;
background: green;
color: #fff;
}
.main{
100%;
height: 100%;
overflow-y:scroll;
overflow-x:hidden;
}

html结构如下：

<div class="lay-table">
　　<div class="tr header-t">
　　　　<p>header</p>

　　</div>

　　<div class="tr">

　　　　<div class="td">
　　　　　　<div class="main">

　　　　　　　　<p>content</p>

　　　　　　</div>

　　　　</div>

　　</div>

　　<div class="tr footer-t">
　　　　<p>footer</p>

　　</div>

</div>