笔记——移动端开发

移动端适配

viewport—可视区

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

盒模型

box-sizing: border-box

flex—弹性盒模型

1. 有border-box的特性
2. 对border、padding、margin都有用
3. 跟max-width、min-width配合

rem

window.onresize=function (){
 document.documentElement.style.fontSize=document.documentElement.clientWidth/48+'px';
};
window.onresize();

相对于HTML元素的font-size的比例
在不同屏幕尺寸下，只需要调整HTML的font-size
移动端布局一切尺寸用rem / %

touch

单点触摸

targetTouches、changedTouches

多点触摸

touches—整个屏幕上的手指（一般不用）
targetTouches—当前物体之上的手指
不需要多点触摸时
为避免多点触摸的影响—采用平均坐标
需要多点触摸的情况

1. 旋转
2. 缩放

库

hammer处理左右滑动，iScroll处理上下滑动

iscroll使用

1. 对父级添加 overflow : hidden;
2. new IScroll

<style media="screen">
    .parent {width:300px; height:400px; border:1px solid black; margin:50px auto 0; overflow:hidden;}
    /* 对父级添加 overflow: hidden; */
</style>
<script>
    window.onload=function (){
        let scroll=new IScroll('.parent', {param});
    };
</script>

常用参数 param

键	默认值	作用
bounce	true	在顶（底）部时，是否允许继续向上（下）拖
bounceTime	600ms	松手时的回正时间
scrollX	false	X方向滚动
scrollY	true	Y方向滚动
freeScroll	false	任意方向滚动
directionLockThreshold	5px	方向锁定阈值
startX	0	默认位置
startY	0	默认位置
disableMouse	true / false	是否关闭鼠标事件探测，可以开启来加速
disableTouch	true / false	是否关闭触摸事件探测，可以开启来加速
disablePointer	true / false	是否关闭指针事件探测，可以开启来加速
mouseWheelSpeed		鼠标滚轮速度
invertWheelDirection	false	反转滚轮方向
momentum	true	开启动量动画（建议关闭）

iscroll事件

xxx.on('', function() {});

事件	作用
beforeScrollStart	手指按下
scrollStart	第一次移动
scroll	滚动中
scrollEnd	手指抬起（在被拖动的元素完全复位时触发）
scrollCancel	手指按下没动，抬起来
*zoomStart	用hammer
*zoomEnd	用hammer

iscroll注意点
iscroll默认拖拽的是父级的第一个子元素

hammer

事件	作用
tap	快速点击（click有延迟250ms左右）
press	长点击
swpie	快速滑动 > 300px/s
panstart	滑动开始
panmove	滑动中
panend	滑动结束
rotate	旋转（需要先启用）

hammer注意点
默认纵向移动禁用，可以通过 DIRECTION_VERTICAL 或 DIRECTION_ALL 开启

browser-sync

bs官网教程
安装

npm install -g browser-sync

运行（在当前文件夹下）

brewser-sync start --server

在浏览器窗口输入

localhost:3000/文件名

F:\HTML\mycode\手机头条--->browser-sync start --server
[Browsersync] Access URLs:
 --------------------------------------
       Local: http://localhost:3000
    External: http://192.168.43.15:3000
 --------------------------------------
          UI: http://localhost:3001
 UI External: http://localhost:3001
 --------------------------------------
[Browsersync] Serving files from: ./

手机端输入

192.168.43.15:3000/文件名

即可同步刷新