<!--强制使用webkit内核进行渲染-->
<meta http-equiv="X-UA-COMPATIBLE" content="IE=edge, chrome=1"/>
<!--移动端视口控制-->
<meta name="viewport" content="width=device-width,initial-scale=1.0,minimum-
scale=1,maximum-scale=1,user-scalable=no">
<!--把数字默认显示拨号链接去掉-->
<meta name="format-detection" content="telephone=no"/>
设计开发流程
切图、重构、前端的知识、灵活
多页视觉放到一个网页文档，采取视觉差特效完成分页展示
音乐不跟随翻页，位置固定，播放旋转，可暂停
移动端项目：
结构层：HTML5
表现层：CSS3
特效：采用CSS3完成主要特效，采用JavaScript控制交互
背景音乐直接采取JavaScript控制Audio的API进行控制
可以直接采用原生态的JavaScript控制CSS3实现翻页效果，放弃前端框架和类库
性能优化分析：
项目为移动端项目，尽可能简化结构层标签
尽可能少用图片，尽量直接使用CSS3控制标签完成图片效果
尽可能减小文件大小，压缩图片到无损最小值
减少服务器请求次数，用原生态JavaScript代替Zepto等前端框架
切图->重构->前端->优化
CSS3长度单位 vw、vh（移动端自适应）
1 h1 {font-size: 8vw;}
(vw这个数值*当前视口的宽度)/100 = h1元素的字号 /*元素的字号单位是mm*/
vw这个数值 = (h1元素的字号*100)/当前视口的宽度
1 div{
2 position: absolute; /*相对于父级元素position:fixed;*/
3 /*相对于父级元素居中*/
4 top: 0;
5 right: 0;
6 bottom: 0;
7 left: 0;
8 margin: auto;
9 }
1 /* 不写这两个通配符默认高度把其撑开，写了就占页面的全部高度 */
2 html,
3 body {
4 height: 100%;
5 }
6
7 div {
8 width: 45vw;
9 height: 71.2vh;
10 font-size: 3.506rem;
11 }
翻页有一个淡入淡出的动画效果
关于rem单位：
rem IE6-8不支持，不考虑低版本ie的兼容，rem是相对于根元素<html>的，html如果没有设置，默认是16px。
1 html{font-size:10px;}
2 body{font-size:1.2rem;/*相对于html，其实是12px*/}
3 h1{font-size:1.6rem;}
一开始初始化的时候写在html上就好了，body统一设置相对于html(root)