移动开发基础与响应式开发 flex grid 布局
移动开发基础：
1. 物理像素：是指屏幕分辩率，又叫设备像素；开发中不会用到，只是用于认识屏幕的分辨率；
2. css像素：又叫逻辑像素，也叫设备独立像素，独立于设备像素外的像素；用于开发中；
3. 终点检测：检测当前设备和浏览器等信息console.log(navigator.userAgent)
横竖屏检测：
window.orientation
加速度检测：
devicemotion事件监听手机加速度
主要有两个属性 event.acceleration 加速度 ，这个属性兼容性不好，必要手机要有陀螺仪才能支持
event.accelerationIncludingGravity 重力加速度，大部分手机都能有效的支持
重力加速度 - 加速度 = 手机的引力
ios中需要https以及第一次需要用户主动点击授权！！！
移动端单位：
1.px; 2.%百分比;
3.em 相对于自身字体大小，如果本身没有字体大小，就会去父元素去找字体大小；
4.rem 相对于根元素html字体大小 默认浏览器字体大小是16px,所以1rem=16px;
根元素设置font-size:62.5%; 那么1rem=10px;
5.vw,vh 相对浏览器可视区域的宽度和高度的1%;
移动端适配：
根据不同屏幕尺寸，自动调节各种长度大小；
原理，利用rem,再根据不同的屏幕尺寸动态计算font-size
视口--viewport：
ios10以后不支持meta禁止缩放！！
document.addEventListener('gesturestart', function (event) {
event.preventDefault()
})
获取视口宽度
window,innerWidth ;
documentElement.clientWidth;
document.documentElement.getBoundingClientRect().width;
flex布局：
移动端最爱的布局方式；
flex容器写法：
1.display:flex || inline-flex; 后者是既有块元素也有行内元素属性
2.flex-direction:row || row-reverse || column || column-reverse 主轴的方向
3.flex-wrap:nowrap || wrap || wrap-reverse 是否换行
5.justify-content:flex-start || flex-end ||center ||space-between || space-around 子元素在主轴对齐方式
注意：space-between是两边紧靠，中间平分，space-around是每个元素间距相同
4.align-items:flex-start || flex-end || center || baseline || stretch 子元素在交叉轴对齐方式
注意：baseline内容基线对齐，stretch是拉伸对齐
5.align-content:flex-start || flex-end ||center ||space-between || space-around 多行时交叉轴对齐方式
注意：一定要换行才有效
flex子项的写法：
1. order:number;默认是0，可以让元素排序，从小到大，不能为负，只能大于等于0的正整数
2.flex-grow:number;设置相同数字，空间AA分，否则谁大谁占的多，拉伸占满容器
3.flex-shrink:number;默认为1，空间不足时自动缩小，为0，不缩小，出现滚动条
4.flex-basis:auto || 0 ||width 默认auto,就是子元素宽度，为0，宽度被内容撑开
grid布局：
二维布局，能同时对横向和竖向进行布局
父项：display:grid
grid-template-columns:100px 100px 100px; //表示分成3列 ，每列的宽为100px ,也可以用repeat(3,100px)简写
grid-template-rows:100px 100px 100px;/表示分成3行 ，每行的高为100px ,也可以用repeat(3,100px)简写
row-gap:20px;行间距
column-gap:20px;列间距 row-gap和column-gap可以简写gap:20px 20px;
单位不仅仅是px，也可以是%
子项：
grid-row-start和grid-column-start 在现有网格外部放置项目
grid-column-start | grid-column-end | grid-row-start | grid-row-end 定义某个子项目的位置 项目的四个边框从哪个网格开始
常用布局方法：
关键字1：auto-fill 单元格固定，容器不固定，就会依次填满，一行满了，就会换下一行
关键字2：fr 剩下的宽度按比例分
例：容器宽度减100px后，剩下的宽度，2fr刚好是1fr的两倍
关键字3：minmax()
例：最小不能小于100px ,最大不能超过1fr
关键字4：auto() 长度由浏览器自己决定；
媒体查询：就是查询屏幕大小
设备类型：screen print all 常用all适用于所有设备
判断条件 and (类似||,或的意思) not (类似！不) only(仅仅)
单一条件：
@media screen and (min-width:900px){ ... }
查询 屏幕 如果大于900px为真 { 就执行括号里面 };
多个条件：
@media screen and (min-width:900px) and (max-width:1000px){ ... }
注意：包括前条件，不包括后条件
移动端事件：
http://hammerjs.github.io/已封装好各种手势的插件（https://www.jianshu.com/p/0b0b9364f967中文地址）
touchstart：手指触摸到一个 DOM 元素时触发;
touchmove：手指在一个 DOM 元素上滑动时触发;
touchend：手指从一个 DOM 元素上移开时触发;
touchcancel：当系统停止跟踪触发触发;
event.touches 当前屏幕上的手指列表
event.targetTouches 当前元素的手指列表
event.changedTouches 触发当前时间的手指列表
touch对象代表一个触点，可以通过event,changedTouches[0]获取
事件点透：点击上层后，上层消失，就会触发下面元素
原因：执行touch后，间隔200毫秒，会查看该位置是否有鼠标事件，有就会执行
解决：阻止touch的默认事件
移动端性能优化提升
css方面 ：
1.类名书写层级尽量简洁；
2.减少高级选择器的使用;
3.通配符*最好不用；
4.css中的属性，尽量写合并的属性，类似margin；
5.使用flex布局；
6.动画尽量用css3的3d，让cpu加速
dom方面
1.获取元素，如果能用id获取,就用id，但是不能滥用，合适再用;
2.减少dom的使用，需要重复利用的，就单独提取出来；
3.动态修改样式时，尽量修改class名，不要直接修改样式；
事件优化
1.减少事件的使用，利用事件代理(事件委托)，原理：事件冒泡；
2. scroll resize mousemove touchmove针对这种事件，就要进行节流函数；
资源的按需加载和预加载
按需加载也加懒加载，需要的时候再加载;
预加载，就是空闲的时候，偷偷加载；
1.图片按需加载
