1. 移动端适配

viewport表示视口,可视区,最早-手机要照顾pc端,默认按照1024宽度解析页面。个别手机initial-scale可能失效,可以用maximum-scale=1.0minimum-scale=1.0禁止缩放。

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scaleable=no,maximum-scale=1.0,minimum-scale=1.0" />

2. 盒模型

普通盒子:

width = width + padding + border;

新的盒子:

width=width

3. flex

弹性盒模型, 平分父级内容取的宽度。

display: flex;
flex: 1;

flex布局天然就是border-box特性,并且也包含margin,可以与max-widthmin-width配合。

4. rem

单位:px,%,em,...

px: 绝对。

em: 相对自身字体。

rem:root-em相对root字体html字体。

在不同的屏幕尺寸下,只需要调整html元素的font-size,在移动端下,一切尺寸都用rem/%

vhvw是给宽高分成一百份。

5. touch 事件

在网页中是mouse事件,在移动端是touchmousedownmoveuptouchstartmoveend

pc端,插入几个鼠标都只有一个指针,在移动端,多个手指会有多点触摸。

mousetouch融合pointer事件,微软推的,但现在还不流行。

所有的DOM3事件都应该绑定

touch的事件对象因为是多点的,所有要先取到事件对象。
ev.targetTouches[0].clientX
targetTouches全兼容。
touchs不兼容。

拖拽:在移动端中,就算移动的再快touchmove也会监听到事件,和浏览器不一样,浏览器一旦移出就会监听不到。在移动端,手抬起了就不会跟着移动了,但是为了性能考虑最好也要删除掉事件。

6. 多点

touchs:不建议使用,不兼容,当前屏幕上的手指个数。

targetTouches:建议使用,标准, 当前被绑定节点上的手指。

Array.form(oDiv).forEach(dom => {
    dom.onclick = function(e) {
        e.targetTouches;
    }
})

不需要做多点触摸的时候,计算平均位置 所有坐标相加除以坐标个数。

避免影响-消除干扰->计算平均坐标。

需要多点-手势->旋转,缩放。

7. iScrollJs

下拉刷新插件库。

8. hammer

const oBox = document.querySelect('.box');
const hammer = new Hammer(oBox);
hammer.on('tap', ev => {
    console.log(ev);
})
hammer.on('press', ev => {
    console.log(ev);
})
hammer.on('swipe', ev => {
    console.log(ev);
})
hammer.on('swipeleft', ev => {
    console.log(ev);
})
hammer.on('swiperight', ev => {
    console.log(ev);
})
hammer.on('swipeup', ev => {
    console.log(ev);
})
hammer.on('swipedown', ev => {
    console.log(ev);
})
hammer.on('pan', ev => {
    console.log(ev);
})

1. 事件

tap:点击,轻点,300毫秒内 按下抬起有反应。

press:点击 按住超过300毫秒才有反应。

swipe:滑动,快速滑动(速度超过300/s) (swipeleftswiperightswipeupswipedown)。

pan:滑动(panleftpanrightpanuppandownpanstartpanmove,panend)。

startmoveendcancel

2. get

// 获取旋转
const config = hammer.get('rotate');
// 开启旋转
config.set({ enable: true});
let deg = 0;
ley old_deg;
hammer.on('rotatestart', ev => { 
    console.log(ev);
    old_deg = deg;
})
// 旋转的角度
hammer.on('rotatemove', ev => { 
    console.log(ev.rotation);
    deg = old_deg + ev.rotation;
})
hammer.on('rotateend', ev => { 
    console.log(ev); 
})

缩放pinch

hammer.get('pinch').set({ enable: true});
hammer.on('pinchstart', ev => {

});
hammer.on('pinchmove', ev => {
    ev.scale;
});
hammer.on('pinchend', ev => {

});

转载须知

如转载必须标明文章出处文章名称文章作者,格式如下:

转自:【致前端 - zhiqianduan.com】 移动端基础概念  "隐冬"
请输入评论...