9月开发总结
1.html5启动动画:
<link rel="apple-touch-startup-image" href="/startup.png">
通过media来控制横屏和竖屏启动动画:
// iPhone
<link href="apple-touch-startup-image-320x460.png" media="(device-width: 320px)" rel="apple-touch-startup-image" />
// iPhone Retina
<link href="apple-touch-startup-image-640x920.png" media="(device-width: 320px) and (-webkit-device-pixel-ratio: 2)" rel="apple-touch-startup-image" />
// iPhone 5
<link rel="apple-touch-startup-image" media="(device-width: 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-width: 768px) and (orientation: portrait)" rel="apple-touch-startup-image" />
// iPad landscape
<link href="apple-touch-startup-image-748x1024.png" media="(device-width: 768px) and (orientation: landscape)" rel="apple-touch-startup-image" />
// iPad Retina portrait
<link href="apple-touch-startup-image-1536x2008.png" media="(device-width: 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-width: 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;
width: 100%;
}
.table-equal li {
display: table-cell;
}
(4)table布局-tr、td
html,body{
width: 100%;
height: 100%;
}
.lay-table{
width: 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{
width: 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>