手记

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) 手机(400 200-399 )

@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动画

6人推荐
随时随地看视频
慕课网APP

热门评论

尽量用css完成效果

总结的很好。

查看全部评论