<!--强制使用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。
一开始初始化的时候写在html上就好了，body统一设置相对于html(root)
1 html{font-size:10px;} 2 body{font-size:1.2rem;/*相对于html，其实是12px*/} 3 h1{font-size:1.6rem;}