移动端项目优化与设计开发全流程-优快云博客

本文详细介绍了移动端项目的优化策略、设计流程及关键技术应用，包括视觉特效、音乐管理、CSS3与JavaScript的交互控制，以及性能优化方法。重点讨论了如何在保持用户体验的同时，实现高效的数据加载和资源管理。


<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)

转载于:https://www.cnblogs.com/lqcdsns/p/5297723.html

H5手机页面剖析