<!--强制使用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)
H5手机页面剖析的更多相关文章
-
h5手机页面禁止缩放
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...
-
h5手机页面注册处理(短信验证)
//获取验证码 var wait = 60; function time(o) { if(wait == 0) { o.removeAttribute("disabled"); o ...
-
h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）
h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...
-
H5单页面手势滑屏切换原理
H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...
-
h5空白页面过渡加载
h5空白页面过渡加载 页面第一部分内容是图片,考虑到手机图片加载慢,想用简单.转化为base64的图片过渡 开始尝试将图片转为灰度图片,结果还是很大. 后来选取重要元素,保存2位的png,尺寸是494 ...
-
【转帖】H5 手机 App 开发入门：概念篇
H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...
-
[转帖]H5 手机 App 开发入门：技术篇
H5 手机 App 开发入门:技术篇 http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...
-
快速构建H5单页面切换骨架
在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...
-
利用简洁的图片预加载组件提升h5移动页面的用户体验
在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...
随机推荐
-
未找到导入的项目，请确认 <;Import>; 声明中的路径正确
当使用vs出现下列情况: D:\xxxx\Web\Web.csproj : error : 无法读取项目文件“Web.csproj”. D:\xxxx\WebServiceManager\Web\W ...
-
ASP.NET 开发笔记1
1.GirdView 动态添加列 PostBack 后 模板列中的控件丢失的问题 http://blackboy51.blog.163.com/blog/static/511359122011910 ...
-
FastReport使用一——简介
一:FastReport Designer用法简介 1.使用FastReport.Net4文件夹下的Designer.exe进行模版的创建工作 图1 图1中,右键删除除==>数据区 之外的其他区 ...
-
死磕 java集合之LinkedHashMap源码分析
欢迎关注我的公众号"彤哥读源码",查看更多源码系列文章, 与彤哥一起畅游源码的海洋. 简介 LinkedHashMap内部维护了一个双向链表,能保证元素按插入的顺序访问,也能以访问 ...
-
jsp模板继承
jsp通过自定义标签实现类似模板继承的效果 关于标签的定义.注册.使用在上面文章均以一个自定义时间的标签体现,如有不清楚自定义标签流程的话请参考这篇文章 http://www.cnblogs.com/ ...
-
浅谈工作单元 在整个 ABP 框架当中的应用
ABP在其内部实现了工作单元模式,统一地进行事务与连接管理. 其核心就是通过 Castle 的 Dynamic Proxy 进行动态代理,在组件注册的时候进行拦截器注入,拦截到实现了 Unit Of ...
-
[android学习]android_gps定位服务简单实现
前言 gps定位服务的学习是这段时间gps课程的学习内容,之前老师一直在将概念,今天终于是实践课(其实就是给了一个案例,让自己照着敲).不过在照着案列敲了两遍之后,发现老师的案例是在是太老了,并且直接 ...
-
System V 与 POSIX
System V 以及POSIX 对信号量.共享内存.消息队列等进程之间共享方式提供了自己的解决方案.因此,在学习时难免存在疑惑,到底有什么区别,哪种方式更佳.经过网上搜索各种博客,做出简单的总结. ...
-
好用的SHELL小编程
1>判断输入为数字,字符或其他 脚本代码: 检测结果: 2>求平均数: 测试效果: 3>自减输出: 脚本代码: 测试效果: 4>在文件 ...
-
手机应用：非功能需求 Check List
服务状态防止并发 网络保持:无线网络,GPRS 网络连接:https,手机助手代理 电量 屏幕保持防止休眠 下载重试机制 定时检查XML 限速下载,线程休眠 下载出错反馈机制 消息广播 状态栏通知 进 ...