2020/7/29 移动端学习

移动端开发:
1,移动端布局—适配

2,touch

3,库

4,响应式

 

**************************************************************

 

viewport

 

 

 

视口标签：

其中width=device-width:页面宽等于设备宽度

这句意思是 不允许放大缩小

 

**************************************************************

 

移动端特效

触摸事件:

 

 

 

触摸事件对象:

几个手指就有几个TouchList,列表

正在触摸当前DOM元素的手指列表

手指状态发生改变的列表

大多都是对元素注册事件,所以targetTouches常用,里面有这些属性

 

移动端拖拽原理:

    

 

 

移动端常见特效

 

classList (ie10以上支持,移动端没问题)

以伪数组的形式返回DOM元素类名 还可以追加,移除,切换类名

 

DOM元素.classList.add(“类名“) 不需要加. 且是追加

DOM元素.classList.remove(“类名“) 移除类名

DOM元素.classList.toggle(“类名“) 会自动判断有没有,没有就会加上

 

 

 

移动端click延时解决方案

移动端click会有300ms的延时,原因是屏幕双击会缩放页面,300ms内等待是否会有第二次点击,没有才执行点击事件 有就是缩放页面了

 

前2种方法都比较麻烦不合理  第二种方法,会被调用超多次,每一次点击就会调用一次函数,这样就不太好 ,于是专门解决这个的方法的插件就出现了

 

引入fastclick.js文件 来取消click的延时,并将300ms后的click阻止

 

强大的轮播图插件  Swipper

 

视频插件

移动端常用开发框架:

   bootstrap  (也有轮播图)