- 尽量使用单页面开发(SPA)
- 慎重选择前端UI框架
- 动画、特性使用准则(60fps)
- 长度单位使用rem
浏览器消耗最小的css属性
- 位置-tranform: translate(x,y,z)
- 大小-tranform: scale(n)
- 旋转-tranform: rotate(ndeg)
- 透明度-opacity: 0..1
实现手机点击事件
基于touchstart、touchend和touchmove三个基础事件实现点击事件
结合jquery代码如下:
$(function() {
var size = $(window).width()/18; //设备宽度除以18
$("html").css("font-size", size);
var myscroll = new IScroll("#file-list"); //用ISscroll实现内容滚动
$("#file-list li").bindtouch(function() {
$(this).remove();
})
});
$.fn.bindtouch = function(cb) {
attachEvent($(this), cb);
};
//实现点击函数
function attachEvent(src, cb) {
$(src).unbind();
var isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;
if (isTouchDevice) {
$(src).bind("touchstart", function(event) {
$(this).data("touchon", true);
$(this).addClass("pressed");
});
$(src).bind("touchend", function() {
$(this).removeClass("pressed");
if ($(this).data("touchon")) {
cb.bind(this)();
}
$(this).data("touchon", false);
});
$(src).bind("touchmove", function() {
$(this).data("touchon", false);
$(this).removeClass("pressed");
});
} else {
$(src).bind("mousedown", function() {
$(this).addClass("pressed");
$(this).data("touchon", true);
});
$(src).bind("mouseup", function() {
$(this).removeClass("pressed");
$(this).data("touchon", false);
cb.bind(this)();
});
}
}
