<!--强制使用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单位：

rem IE6-8不支持，不考虑低版本ie的兼容，rem是相对于根元素<html>的，html如果没有设置，默认是16px。

 html{font-size:10px;}

 body{font-size:1.2rem;/*相对于html，其实是12px*/}

 h1{font-size:1.6rem;}

一开始初始化的时候写在html上就好了，body统一设置相对于html(root)

H5手机页面剖析的更多相关文章

  1. h5手机页面禁止缩放

    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable= ...

  2. h5手机页面注册处理(短信验证)

    //获取验证码 var wait = 60; function time(o) { if(wait == 0) { o.removeAttribute("disabled"); o ...

  3. h5微信页面在手机微信端和微信web开发者工具中都能正常显示，但是在pc端微信浏览器上打不开（显示空白）

    h5微信页面在手机微信和微信开发者工具中都能正常显示,但是在pc端微信浏览器上打不开或者数据加载不出来. 原因:pc端微信浏览器不支持ES6语法,我的代码中使用了一些ES6的特性 解决:将ES6转换为 ...

  4. H5单页面手势滑屏切换原理

    H5单页面手势滑屏切换是采用HTML5 触摸事件(Touch) 和 CSS3动画(Transform,Transition)来实现的,效果图如下所示,本文简单说一下其实现原理和主要思路. 1.实现原理 ...

  5. h5空白页面过渡加载

    h5空白页面过渡加载 页面第一部分内容是图片,考虑到手机图片加载慢,想用简单.转化为base64的图片过渡 开始尝试将图片转为灰度图片,结果还是很大. 后来选取重要元素,保存2位的png,尺寸是494 ...

  6. 【转帖】H5 手机 App 开发入门：概念篇

    H5 手机 App 开发入门:概念篇 http://www.ruanyifeng.com/blog/2019/12/hybrid-app-concepts.html 作者: 阮一峰 日期: 2019年 ...

  7. [转帖]H5 手机 App 开发入门：技术篇

    H5 手机 App 开发入门:技术篇   http://www.ruanyifeng.com/blog/2019/12/mobile-app-technology-stack.html 阮一峰老师的文 ...

  8. 快速构建H5单页面切换骨架

    在Web App和Hybrid App横行的时代,为了拥有更好的用户体验,单页面应用顺势而生,单页面应用简称`SPA`,即Single Page Application,就是只有一个HTML页面的应用 ...

  9. 利用简洁的图片预加载组件提升h5移动页面的用户体验

    在做h5移动页面,相信大家一定碰到过页面已经打开,但是里面的图片还未加载出来的情况,这种问题虽然不影响页面的功能,但是不利于用户体验.抛开网速的原因,解决这个问题有多方面的思路:最基本的,要从http ...

随机推荐

  1. 《Andrew Ng深度学习》笔记5

    深层神经网络 深层神经网络的组成如图,这里主要是深层神经网络符号的定义. 为什么要用深层神经网络,有什么好处?这里主要是分层的思想.在软件工程中,如果问题遇到困难,一般是通过“加多”一层的方法来解决, ...

  2. python学习之路---day09

    函数案例: return 可以终止函数后面的调用 def abc() print("1") print("2") print("3") pr ...

  3. CDN基本原理和功能浅析

    CDN的全称是Content Delivery Network,即内容分发网络.CDN的通俗理解就是网站加速,CPU均衡负载,可以解决跨运营商,跨地区,服务器负载能力过低,带宽过少等带来的网站打开速度 ...

  4. 通过CMD命令设置网络参数

    在微软的Windows系统中,一般情况下都是在可视化界面中设置IP地址和DNS的,进入“本地连接”->“属性”->“TCP/IP协议”,设置IP和DNS.但有些情况是没有这个权限的,比如在 ...

  5. hdu 1754 I Hate It 线段树基础题

    Problem Description 很多学校流行一种比较的习惯.老师们很喜欢询问,从某某到某某当中,分数最高的是多少. 这让很多学生很反感. 不管你喜不喜欢,现在需要你做的是,就是按照老师的要求, ...

  6. c# MVC返回小驼峰Json(首字母小写)

    1.与前端交互时,前端总希望传过去的json字段名首字母小写,但是.net规范是首字线大写 如果就写了下面的转换方法 /// <summary> /// Poco类字段名转换成首字母小写的 ...

  7. hibernate实现学生-课程-成绩

    1.实体类Student package com.test.model; import javax.persistence.Entity; import javax.persistence.Gener ...

  8. [转] Chrome - 浏览器跨域访问设置（附：新老版本两种设置方法）

    [From] http://www.hangge.com/blog/cache/detail_1703.html 在进行前后分离的 webapp 开发,或者 H5 移动 App 开发时,我们会使用 P ...

  9. [转] Spring Boot实战之Filter实现使用JWT进行接口认证

    [From] http://blog.csdn.net/sun_t89/article/details/51923017 Spring Boot实战之Filter实现使用JWT进行接口认证 jwt(j ...

  10. js数组方法详解

    Array对象的方法-25个 /*js数组方法详解 */ /* * 1 concat() 用于连接多个数组或者值-------------- * 2 copyWithin() 方法用于从数组的指定位置 ...