移动端适配
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—弹性盒模型
- 有border-box的特性
- 对border、padding、margin都有用
- 跟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—当前物体之上的手指
不需要多点触摸时
为避免多点触摸的影响—采用平均坐标
需要多点触摸的情况
- 旋转
- 缩放
库
hammer处理左右滑动,iScroll处理上下滑动
iscroll使用
- 对父级添加 overflow : hidden;
- 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/文件名
即可同步刷新