H5頁面開發之頁面基本結構佈局
阿新 • • 發佈：2019-01-22
H5頁面主要藉助HTML5技術（例如CSS3媒體查詢、CSS3動畫、Canvas等），將圖、文、動畫、視訊、音訊等媒體形式進行合理組合，常用於邀請函、小遊戲、品牌展示、抽獎等，主要在移動社交環境如微信中傳播。
單頁Web應用（SPA）的模式是H5頁面最常用的一種模式，整個H5頁面只需要單個HTML 檔案，通常瀏覽器一開始會載入必需的HTML、CSS和JavaScript，所有的操作都在這個HTML上，通過JavaScript控制DOM操作來完成。
在下面的結構中，核心原理是，每一個包含page類名的DOM元素為一個可見的頁面，通過控制不同的page元素，來實現對頁面的進場出場的控制。本文只列出來一個簡單的HTML結構，和部分的css，當然如果想實現炫酷的效果和豐富的互動，還需要很多其他的模組，例如預載入、音訊視訊處理的JS。
PS:工作中的一些H5不方便公開，想著單獨做作品放在部落格裡，尋找好的方案和設計。。。
html檔案
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1 user-scalable=no" />
<meta name="apple-mobile-web-app-capable" content="yes" css檔案
@charset "utf-8";
html {
font-size: 10px
}
body {
width: 100%;
height: 100%;
position: absolute;
background: #fff;
}
/*********************************************************/
.dialog,
.page {
width: 100%;
max-width: 600px;
height: 100%;
display: none;
position: absolute;
top: 0;
right: 0;
left: 0;
overflow: hidden;
}
.dialog {
background: rgba(0, 0, 0, 0.8);
z-index: 9999;
}
.content {
height: 100%;
width: 100%;
position: absolute;
top: 50%;
left: 50%;
-webkit-transform: translate3d(-50%, -50%, 0);
transform: translate3d(-50%, -50%, 0);
outline: 1px solid red;
}
.btn-common {
background: rgba(0, 0, 0, 0.6);
position: absolute;
width: 8rem;
height: 3.5rem;
line-height: 3.5rem;
font-size: 1.8rem;
color: #fff;
text-align: center;
}
.btn-next {
bottom: 1rem;
right: 1rem;
}
.btn-prev {
bottom: 1rem;
left: 1rem;
}
.btn-touchable.touched {
background: rgba(0, 0, 0, 0.3);
margin-bottom: -2px;
}