H5手机页面剖析
<!--强制使用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(移动端自适应)
h1 {font-size: 8vw;}
(vw这个数值*当前视口的宽度)/100 = h1元素的字号 /*元素的字号单位是mm*/
vw这个数值 = (h1元素的字号*100)/当前视口的宽度
div{
position: absolute; /*相对于父级元素position:fixed;*/
/*相对于父级元素居中*/
top:;
right:;
bottom:;
left:;
margin: auto;
}
/* 不写这两个通配符默认高度把其撑开,写了就占页面的全部高度 */
html,
body {
height: 100%;
} div {
width: 45vw;
height: 71.2vh;
font-size: 3.506rem;
}
翻页有一个淡入淡出的动画效果
关于rem单位:
html{font-size:10px;}
body{font-size:1.2rem;/*相对于html,其实是12px*/}
h1{font-size:1.6rem;}
一开始初始化的时候写在html上就好了,body统一设置相对于html(root)
最新文章
- APUE学习之多线程编程(二):线程同步
- 维特比算法(Viterbi Algorithm)
- 【matlab】设定C++编译器
- 攻城狮在路上(叁)Linux(十六)--- 命令与文件的查找
- [EventBus源码解析] 初探EventBus
- DigitalOcean上SSH Key的创建(附DigitalOcean邀请)
- 历时3个月,金属流通行业管理系统(B/S)版成功上线
- DSP280x的数模转换使用
- Java集合框架(四)
- php中如何使用phpredis
- Educational Codeforces Round 11
- 【HDU1231】How Many Tables(并查集基础题)
- 事件:target与currentTarget区别
- 开源DirectShow分析器和解码器: LAV Filter
- ssh安装过程
- Android如果有一个任意写入的漏洞,如何将写权限转成执行权限
- 【转载】浅谈事件冒泡与事件捕获 - javascript 事件代理
- mac电脑复制粘贴使用command+c command+v
- ZOJ2018/4月月赛G题Traffic Light(广搜)
- int类型转string类型c++
热门文章
- CentOS修改默认yum源为国内yum镜像源
- Qt 学习之路 2(66):访问网络(2)
- 关于Apache显示port 80 in use 无法解决的情况,这个世界对程序媛太不友好了
- Python中的if __name__ == &#39;__main__&#39;
- Chrome浏览器如何完美实现滚动截图技巧
- pyc和pycodeobject
- [BZOJ 5330][SDOI2018] 反回文串
- Codeforces - 240F 是男人就上26棵线段树
- java语言的各种输入情况-ACM
- mutillidae2.6.48部署到phpstudy