移动开发京东商城三天.pdfVIP

1.1复习

1.1.1三种布局

有最大、最小宽度的百分比自适应布局

适用场景：门户首页，较多的首页。

百分比自适应布局

适用场景：信息文字较多的网页，内容较多网页。

全屏自适应布局

适用场景：单页面网页，移动webapp页面。

1.1.2Box-sizing在移动端的使用

在百分比定宽的页面经常使用。

*,

before,

after{

-webkit-box-sizing:border-box;

/*以你的border开始计算你的宽度*/

}

1.2移动端

Touch

touchstart：当手指触碰屏幕时候发生。不管当前有多少只手指

touchmove：当手指在屏幕上滑动时连续触发。通常我们再滑屏页面，

会调用event的preventDefault()可以默认情况的发生：页面滚动

touchend：当手指离开屏幕时触发

touchcancel：系统停止触摸时候会触发。

例如在触摸过程中突然页面alert()一个提示框，此时会触发该，这个

比较少用

触摸的响应顺序

1、ontouchstart

2、ontouchmove

3、ontouchend

4、onclick300ms延时

Event

originalEvent（原生）是jquery封装的。

targetTouches目标元素的所有当前触摸

changedTouches页面上更改的所有触摸

touches页面上的所有触摸

clientX、clientY相对于当前屏幕的X或Y位置

pageX、pageY相对于整体页面的X或Y位置

transitionEnd过渡结束。

animationEnd动画结束

移动端框架

例如zeptotouch.js

swipe,

swipeLeft,

swipeRight,

swipeUp,

swipeDown,

doubleTap,

tap,

singleTap,

longTap

都是由我们的原生touch封装的。

1.3常见的移动端问题

1.3.1什么是Retina显示屏，带来了什么问题

retina：一种具备像素密度的液晶屏，同样大小的屏幕上显示的像素点

由1个变为多个，如在同样带下的屏幕上，苹果设备的retina显示屏中，像素

点1个变为4个

在显示屏中的位图被放大，会变得模糊，因此移动端的视觉稿通

常会设计为传统PC的2倍。

那么，前端的应对方案是：

设计稿切出来的