H5新春贺卡衍生而来的web移动小杂谈笔记

新春贺卡篇之总结

pc和移动端区别：
1：操作尺度
2：布局（主要输流式布局为主，很少有左右布局）
3：开发工具（一般以iphone5为标准），
4：调试工具：weinre/ uc浏览器开发板 chrome模拟器
5：响应式布局：处理分辨率
实际psd像素宽度是640或者是720。一般把设计稿变成640
手机上4个像素点=物理一个像素点，切图的时候，比如图标宽110->55
建议使用rem
6：混合开发
有一些页面是需要嵌入到app页面的，是html5的。在安卓下是直接可以嵌入页面中
7：移动web事件和pc的区别
a: 触摸事件 touch事件 （touchstart--touchmove--touchend ） touchcancel(处理系统事件，不多)
b: 旋转
c: 点击，点穿
d:格式化css
8 ：强大的html5API
可以调用手机底层接口功能：比如摇一摇 震动 定位 拍照
9 ：css3 and html5
布局上发生了很大变化，因为可以使用弹性盒子：display:-webkit-box;会根据宽 度计算子元素宽度，以父级为中心，对子集可以垂直布局，也可以水平布
局
10 : 性能的考虑
在移动端改变left这些会很耗性能,要利用css3做动画animation。3d加速引擎,设备的gpu渲染的，效率要高很多 @keyframes 动画贞 animation-name()
动画名称 animation-duration 持续事件 webkitAnimationEnd监听动画结束的事件
css3动画框架：animate.css可以满足绝大部分的css3的动画效果
小图标雪碧图或者文字图bootstrap
移动端尽可能少动dom元素（dom animation）
懒加载
向下兼容
canvas代替img标签展示：img是靠浏览器展示跟手机性能相关大。canvas会触发物理设备的gpu渲染drawImg(image,x,y)
预加载图片 image object
11：兼容性：webkit内盒都兼容（操作系统：安卓 ,ios）
uc浏览器 qq浏览器 少量的safra浏览器 viewport虚拟口
一定要确定满足那些浏览器就可以上线了，不必要兼容那些少用的，微信内置的浏览器限制了很多浏览器

12：响应式web开发：在pc或者手机都可以看 m:xxoo.com 不适应复杂网站数据交互，适合简单展示网站
13：移动端开发更加的吃香
14：开发框架：希望加载更加少量的代码，还有网速的限制
jquery mobile 开发框架
angular mobile 开发框架
zepto.js 开发库 和jquery 95%上是一样的 。提供了很多插件，比如touch事件（tab-sigleTap-doubleTap-swipe）
也可以使用原生js,仅仅是w3c支持的

二：Emulation移动端的模拟器
谷歌浏览器开发者工具中的一个插件
resolution 分辨率设置

Device --设备信息
model 设备选择
resolution 分辨率设置
Device pixel ratio 像素比设置（物理像素和独立像素的比值）
Emulation touch screen 模拟触摸事件

ontouchend手指抬起来
obox.addEventListener("touchend',function(){ })//事件监听，一般支持这种写法
地理信息 Device geolocation overrides 重置地理信息
陀螺仪
a围绕着z轴的旋转，屏幕里面打进去一颗钉子。逆时针
b x轴翻转，上下
j y轴，左右的翻转
viewport 魅族MX3

设置窗口的：
<meta name="viewport" content=" " />
width [pixel_value | device-width 走设备默认的分辨率] width 直接去设置具体数值大部分的安卓手机不支持的 但是IOS支持
user-scalable 是否允许缩放 （no||yes）
initial-scale 初始比例 1.0 原始大小（常用） 2.0 放大两倍
minimum-scale 允许缩放的最小比例：最小缩放，一般是1.0
maximum-scale 允许缩放的最大比例
target-densitydpi [api]接受几种参数 ios不支持 安卓支持
-- dpi_value 70–400 //每英寸像素点的个数
-- device-dpi 设备默认像素密度
-- high-dpi 高像素密度
-- medium-dpi 中等像素密度
-- low-dpi 低像素密度
-- webkit内核已不准备再支持
<meta name="viewport" content="width=device-width,height=device-height,user-scalable=no,initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,target-densitydpi=device-dpi" />

@meida all
and 关键字
not排除某种类型
only只有
all 媒体类型
(max-width:599px) 分辨率最大的599
(min-width:600px)
(orientation:portrait)竖屏
（orientation:landscape）横屏

@midea all and (min-width:1200px) and( max-width:1220px)

适配考虑：pc（>1024） ipad(1024) 手机[phone] ）

@media all and (min-width:1200px){
.box{height:1200px; width:1200px;
background:red;
}
}
@media all and (min-width:1024px) and (max-width:1199px){
.box{height:500px; width:1024px;
background:blue;
}
}
@media all and (min-width:400px) and (max-width:1023px){
.box{height:400px; width:400px;background:#f60;}
}
@media all and (min-width:220px) and (max-width:399px){
.box{height:100px; width:4100px;background:yellow;}
}

实际开发
适配：
<meta name="viewport" content="width=device-width,user-scalable=no,target-densitydpi=medium-dpi" />
主流分辨率:240320(一般不考虑)、320480、480800(多)、640960(多) 480854 1280720 8001280 10801920
/
320 - 480
/
A.页面设置固定宽度320px，margin居中，左右留白用背景填充
B.通过media，根据不同的分辨率去设置不同的样式
C.通过100%、flex或rem等手段，等比例缩放 1rem= 1个html上设置的字体大小
在高dpi情况下图片会有发虚失真 640 320 rem
em 相对于字体大小 font-size:24px 1em=24px
rem 相对于根节点的字体大小的计量单位
vw
vh: 见课程笔记

ps(别人的总结--拿过来供观赏)
除了以上这些基础库和基础框架，我们可能还需要添加一些第三方库，比如iscroll，此库兼容性好，唯一缺点就是在低端设备上，会卡，所以项目不能全局使用iscroll实现滚动效果。我们需要添加原生的scroll来实现项目中的滚动效果，如果使用原生scroll不能实现的，那么才使用iscroll来实现。

比如：faskClick，它解决点击事件延迟的bug，当然zepto的touch模块也可以解决。

比如：模板引擎，像underscore，handlerbars等。

比如：HTML5的application cache本地缓存机制。

移动开发总结：

（1）jQuery mobile或者Zepto+自己设计UI

（2）seajs或requirejs+Zepto

（3）seajs或requirejs+Zepto+Backbone+underscore

（4）angularjs或react

我个人希望能够使用第三种，然后项目成熟了，再使用第四种。毕竟新技术的实践，还是很有想象空间的。

当然，如果对技术不需要深入，只要实现功能，那么使用第二种我觉得还是不错的。 至于第一种，我个人觉得模块化开发还是非常必要的，之前在公司里面看之前的前端负责人开发的一套系统，代码写的太混乱了，简直看不得，维护起来非常不方便，所以模块化开发，我个人觉得，必须使用。

关于移动端的UI组件，我推荐腾讯的frontUI。百度的gmu很久没更新了，也没人维护了，而且耦合性比frontUI大，不推荐。

插入：移动端检测浏览器手机内核：http://www.cnblogs.com/yuzhongwusan/archive/2012/09/03/2669022.html

新春贺卡中提出的几点总结如下
1：简介的html结构
2：尽可能少用图，多用css重构
3：减少请求数
4： 压缩无损图片
5：动画尽量css3，少用dom动画