移动端开发

流式布局

• 百分比布局 非固定像素 内容向两边填充
• viewport 移动端特有 承载网页的一个虚拟区域 浏览器–>viewport–>网页
• 适配方案
  • 网页和浏览器宽度保持一致
  • 默认显示的缩放比例和pc端保持一致(1.0)
  • 不允许用户自行缩放网页
• 适配设置：

1. width/height 可以设置宽度/高度（device-width 当前设备的宽度）
2. initial-scale 可以设置缩放比例
3. user-scalable 可以设置是否允许用户自行缩放
4. maximum-scale/minimum-scale 可以设置最大/最小缩放比例

• 例子 不允许用户缩放 宽度一致比例1.0

新事件

touch 触摸事件

• touchstart 手指触摸屏幕时触发

• touchmove 滑动时触发

• touchend 离开屏幕时触发

• touchcancel 被迫终止滑动时触发（来电 弹消息）

• TouchList 触摸点的集合

• changedTouches 改变后的触摸点的集合

• targetTouches 当前元素的触摸点集合

• touches 页面上所有的触摸点的集合

解决移动端响应慢问题

1. tap 响应速度快（ click有延时300ms） zepto.js 插件
2. fastclick.js 插件

<script src="https://cdn.bootcdn.net/ajax/libs/fastclick/1.0.6/fastclick.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function () {
        FastClick.attach(document.body);
    }, false);
    // 正常使用click
</script>

oveflow:hidden

绝缘 别人不影响自己 自己不影响别人

区域滚动插件

iScroll

<script src="//ossweb-img.qq.com/images/js/iscroll_library/iscroll-5.2.0.js"></script>
new IScroll(dom, {
    //滑动方向
    scrollX: true,
    scrollY: true
});

主动触发事件

dom对象.trigger(事件)//通过js主动触发某个事件

#less

less语法

变量

• name表示变量 value表示值

1. @name:value;
2. 字符串@{name}{ //变量和字符 拼接
   …
   }
3. .left();// 表示继承.left的类样式

函数

//传参 默认值为left

1. name(@name:left){
   …
   }f

嵌套

a{
div{
…
}
&:hover { //div的伪元素
…
}
> div{ //子代选择器
…
}
…
}

导入

@import url(path);

运算

@a : 1;
ul{
width:@a*5%;
color: red+green;
}

方法

length()
extract(@adapterDeviceList, @index); //获取第一个参数索引为@index