之前的文章中已经了解到了CSS3和HTML5在移动web开发中的使用非常频繁。既然经常使用那就必须学习呀。->学习CSS3 ->学习HTML5
之前已经了解了结构和样式,现在该来学习学习表现了,也就是javascript。在移动端依然可以使用原生,也有很多开发框架,jquery mobile、MUI
等。
由于移动端的操作方式异于pc。移动端使用手势取代了鼠标的输入输出时间,因此移动端也就拥有了不同的事件。移动端的手势事件:
- touchstart 手指接触屏幕时触发
- touchmove 手指在屏幕上移动时触发
- touchend 手指离开屏幕时触发
- touchcancel 触摸时间被取消,比如当滑动时有电话接入
他们与click事件有何区别呢?点击事件分为click和doubleclick,单击和双击事件是如何区分的呢,它们是通过检测两次点击的间隔时间来的,时长为300ms,因此click事件会有300ms的延迟,而移动端用户对于时间的感知是非常敏感的,为了提高感知,那么就必须要消除这个点击事件的时延,这时候touch事件就应运而生了。
在一些框架中提供了一些封装好的事件,如jquery mobile中的tab事件,就是通过对touch事件的封装来完成的。
到这里,结构+样式+表现就准备完毕了,那该开始页面的制作了。我们去拿PSD的文件准备切图了。纳尼?图还没做好,设计师对尺寸还无从下手。为了一张图能够适配多种设备,可以把设计图尺寸做大一些。比如切640的尺寸,我们在页面编写的时候使用书写成320的尺寸,当在分辨率分高的手机上的时候,也就不会因为原图尺寸太小而图片变得很小了。
另外在移动web开发的时候应该尽量避免使用float
、display:fixed
属性。
推荐使用-webkit-box-flex
继续探索