移动端开发技术文档.docx

移动端开发技术文档
字体
Web页面采用的是绝对的字体,即像素(px)
APP开发采用的是pt,
-?docfrom=rrela 字体与pt之间的对应关系
Html5移动端页面开发采用的是相对字体(rm / rem)
rm 是相对于父元素,rem是相对于文档根元素来定义;
Html5页面布局
移动端开发的布局是相对的,不能设置固定大小,包括各DOM元素;
如页面上的图片,一般来说有二种形式:
全屏宽或带边距的图片;
图片加文字,利用文字块来定义图片的高度
注意:html5页面中不适合在一行中使用多列布局图片
(解决方法:a. 给图片固定的相对高度; b. js计算页面宽度,利用该宽度计算出该列图片的高度)
,精简版的Jquery,与Jquery有相似的语法
详见API地址:/
如click事件,写法如下:
$(".post-rate .icon-hx003").on("click",function () {
$(".post-rate .icon-hx003").removeClass("cur");
var score = parseInt($(this).attr("data-score"));
for(var i=0; i<=score-1;i++) {
$(".post-rate .icon-hx003").eq(i).addClass("cur");
}
});
FastClick 解决点击事件穿透
如:click事件作用等同于tap事件,我们可以用使用Jquery的习惯来写移动端业务/事件代码
使用很简单:
();
Lazyload 图片懒加载
滚动加载图片(懒加载)原理:icles/rUjIZzb
移动端分页
原理:利用页面滚动,距底部距离来实现分页