移动端

Posted 张若昀的小迷妹

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了移动端相关的知识,希望对你有一定的参考价值。

一、课程大纲

1.     基础事件

touchstart

touchmove

touchend

2.     event对象

取消默认事件

阻止冒泡

防止文字选中和阻止默认菜单

鼠标事件延迟

事件点透问题

3.     touchEvent

touches

changedTouches

targetTouches

4.     滑屏处理

拖拽原理分析

滑屏幻灯片简版

5.     transform2D变换

rotate() scale() skew() translate()

left和top引起的回流问题及优化

处理transform中不能通过计算计算后样式获取的问题

6.     transition动画

transtion基本知识点

贝塞尔曲线运动

transitioned事件

transition不执行的bug

7.     实例 移动端版音悦台首页制作

rem布局适配

横竖屏切换适配

fixed定位的bug及替代方案

滑屏导航缓冲回弹动画的实现

完整版无缝滚动的滑屏幻灯片

滑屏选项卡

8.     transform3D

滑动旋转的方块

3d多边体制作

n边形的外角计算与正n边形的中心点计算

9.     3d桌面切换

百分比适配怪异盒模型布局适配

animation的loading动画

立体三棱柱制作

页面绝对坐标获取

ios3d变换 的兼容问题及解决方案

10.    

二、基础知识

1.     像素

iphone5 640*1136像素 物理像素

px 逻辑像素 浏览器使用的抽象单位 640*1136的div不能在iphone5上铺满

dp,pt设备无关像素

dpr设备像素缩放比

1px=(dpr)^2*dp 平面上

1px=dp*dp 纬度

技术分享图片

技术分享图片

2.     viewport

* ios的viewport=980

手机浏览器默认为我们做了2件事

        页面渲染在一个980px(ios)的viewport 缩放

窗口缩放sacle

 

3.     meta标签

设置viewport

  <meta name="viewport" content="width=device-width, initial-scale=1.0">

minimum-scale

maximum-scale

user-scalable用户能否缩放

4.     设计移动web

方案1 根据设备的实际宽度来设计(常用)

方案2 1px=1dp 缩放0.5

1px边框和高清图片都不需要额外处理

2种都不好

5.     弹性盒子布局

技术分享图片

flex:1; 1/n

混合划分:

技术分享图片

水平垂直居中:

技术分享图片

常见布局

技术分享图片

兼容性:

        ios可以使用最新的flex布局

        android4.4及以上可以使用最新的flex布局

        android4.4以下使用旧flex

技术分享图片

6.     响应式设计

媒体查询是核心

百分比

弹性图片 即图片大小为百分比

重新布局,显示与隐藏 绝对定位(经常切换位置的元素)

7.     特别样式处理

图片大小用dp

1px边框

技术分享图片

rem根据htmlfont-size为相对单位,rem=screen.width/20,font-size不应该使用rem而使用px

技术分享图片

8.     交互事件 touch

移动web上的click事件响应都要慢300ms

使用Tap(自定义)事件代替click事件

技术分享图片

Tap事件的点透bug:点击蒙层,下面元素的click会触发

技术分享图片

9.     touch事件

技术分享图片

技术分享图片

技术分享图片

touch android bug

技术分享图片

弹性滚动:

技术分享图片

技术分享图片

上拉加载:scroll事件 而不是touch事件

10.    

三、 

以上是关于移动端的主要内容,如果未能解决你的问题,请参考以下文章

为啥vue适合移动端开发呢?

1移动端 2后台 3 移动端,Web 端 4 PC端

移动端事件

二.移动端组件库

vue-移动端日历插件

jeecg移动开发能力表单移动开发能力,提供多套表单模板(移动端PC端),支持自定义