移动端”宴席知多少

转载(http://adt.aicai.com/index.php/archives/179/)

瞎折腾移动端的项目已经很长一段时间了，并不像其它企业一样，可以有项目组去完成，基本都是一个人瞎尝试，时而web，时而web app。恍恍惚惚过了这段岁月，也不晓得自己忙了啥。总叫别人去总结，让别人学会总结，也该为自己总结总结了。也为了团队之间更好的知识共享吧。如何开发移动端就跟如何上菜一样，上菜有规则，先冷后热，先菜后点，先咸后甜，先炒后烧等等。按照一定的程序来才能恰到好处地掌握。那么，现在还是上菜吧，客官等久了... ...

前菜（凉菜，冷盘）

一、移动端开发与PC端开发不同
大家都知晓，手机种类千千万，也导致移动端开发面对的屏幕尺寸是各种头疼。
Web：固定布局和弹性布局
Web app：响应式布局

二、调试工具
firefox的响应式设计视图:Firefox 浏览器内置了自定义设计视图的功能，可以通过 Firefox->Web 开发者->自定义设计视图（或者摁下 Shift + Ctrl + m ）。相比网络工具，运行更加流畅，无需联网。

Chrome开发，chrome浏览器也有个Emulation，如图：

chrome

另外，就是设备上的调试，方法很多。

1. 直接把做好的静态页面放到手机用浏览器打开查阅
2. 在本地搭建环境，比如php环境，局域网访问ip查阅页面（有搭建过博客的都知道）
3. 远程调试

A:Android 设备 Chrome 远程调试
B:uc浏览器开发者调试

开胃汤

那么，问题来了，移动端开发到底该如何下手？
1．关于viewport

a)概念：设备的pixels和css的pixels（总体而言，你只需要关注CSS的pixels，这些pixels指定你的样式被如何渲染。
）
b)概念：视窗 viewport（viewport的功能在于控制你网站的最高块状（block）容器：<html>元素。）

viewport

viewport2

下面是link的一些用法，但是移动端也好web端也好，为了减少HTTP请求数，个人建议最好能使用媒体查询来解决的可以尽可能的用媒体查询。

link

媒体查询如下：

媒体查询

头菜

作为头菜，一般宴会来说，头菜是代表性的菜点。那么说到移动端呢？

移动端的reset

时过境迁，Reset 逐渐淡出的前沿前端的视野，normalize.css 取而代之。normalize.css，统一样式的同时保留可辨识性；reset 统一样式，完全没有可读性，破坏原有标签的语义化。针对每个项目的不同，各自可以基于Normalize.css，根据目前我们大家的使用习惯进行了一些清零及移动端的特点添加一些基础样式。

在这里会提到一个rem,想当初应该很多人也讨论研究过px，pt，em等单位吧。rem是CSS3新引进来的一个度量单位，举个例子：“em”是相对于其父元素来设置字体大小的，这样就会存在一个问题，进行任何元素设置，都有可能需要知道他父元素的大小，在我们多次使用时，就会带来无法预知的错误风险。而rem是相对于根元素<html>，这样就意味着，我们只需要在根元素确定一个参考值。

浏览器的基准字号设置为 62.5%，也就是 10px，现在 1rem = 10px —— 为了计算方便。然后在body 上应用了 font-size: 1.6rem;，将页面字号设置为 16px。
html {font-size: 62.5%;} body {font-size: 1.6rem; /* =16px */}

可以用以下的代码片段保证在低端浏览器下也不会出问题

html { font-size: 62.5%; }
body { font-size: 14px; font-size: 1.4rem; } /* =14px /

移动端的html5+css3

css3代替DOM animation,使用setTimeout定时器, 定时修改DOM元素的style属性。
css3使用设备GPU渲染，动用硬件设备本身的计算能力来做一些展示，效率上要比DOM animation要高很多。

@keyframes
animation-name（动画名称）
animation-duration（动画持续时间）
animation-delay（延迟执行时间）
animation-timing-function（动画形变函数指定）
animation-play-state（播放状态指定）
animation-iteration-count（无限循环）

至于HTML5，大家目前用的最多的也就仅仅是那几个标签而已，想详细了解的自便吧。比如：

<input type="text" placeholder="规定帮助用户填写输入字段的提示">
<input type="number">
<input type="date">
<input type="range">
<input type="color">
<input type="email">
<input type="search">

移动端的javascript

先说这一类的框架吧：
JQuery mobile，Sencha Touch等都是很庞大的UI框架。
Zepto.js：框架小，类jQuery，没有多余的其他模块，适合团队自己扩展。（不支持WP）
没有一个很好的团队去折腾的话，还是建议使用jqm，因为你到后面还是会改成jqm搭配Hammer.js来搭建

说起移动端的javascript，使用手势操作代替鼠标输入/出事件。开发者大多数会使用封装的 tap 事件来代替click 事件，所谓的 tap 事件由 touchstart 事件 + touchmove 判断 + touchend 事件封装组成。那就先来看看PC端的一些事件：(mousedown, mouseup, click)

移动端的手势事件：
touchstart //当手指接触屏幕时触发
touchmove //当已经接触屏幕的手指开始移动后触发
touchend //当手指离开屏幕时触发
touchcancel //当在滑动手机的过程中突然出现一个系统事件，比如电话。这会就cancel掉。（基本很少用）

为何要用touch事件代替click事件？
- click事件300ms延时
- touch事件支持多点触摸
- 手势操作

移动端的css3的自定义字体（@font-face），前一篇文章有做介绍。这里就不详细述说。