移动端学习笔记（二）

viewport适配

(function(){    var w = window.screen.width;    var targetW = 320;    var scale = w/targetW;    var meta = document.createElement('meta');    meta.name = "viewport";    meta.content = "user-scalable=no,initial-scale="+scale+",minimum-scale="+scale+",maximum-scale="+scale+"";    document.head.appendChild(meta);})();

rem适配：根据根节点的字体大小进行计算

r：root（根）

(function(){      var html = document.documentElement;// 获取html      var hWidth = html.getBoundingClientRect().width;// 获取移动端屏幕的宽度      html.style.fontSize = hWidth/15 + "px";// 根据比例 设置html的字体})()

清除移动端的默认样式

a,input,button{-webkit-tap-highlight-color:rgba(0,0,0,0);}input,button{-webkit-appearance:none;border-radius:none;}body{margin:0;padding:0;-webkit-user-select:none;}body *{-webkit-user-select:none;font-family:Helvetica;}body{-webkit-text-size-adjust:100%;}

弹性盒模型：

使用弹性盒模型的时候，父元素要加

新版弹性盒模型 display：flex（一些移动端不兼容）

  flex-direction：row（设置主轴方向为水平方向）flex-direction：column（设置主轴方向为垂直方向）

  flex-direction：row-reverse（设置主轴方向为水平，元素排列为反序）

  flex-direction：column-reverse（设置主轴方向为垂直，元素排列为反序）

老版弹性盒模型 display：-webkit-box（一定要加浏览器内核前缀）

   -webkit-box-orient：horizontal（设置主轴方向为水平方向）-webkit-box-orient：vertical（设置主轴方向为垂直方向）

如果想要实现老版弹性盒模型，元素反序，必须两者配合使用

实现元素水平方向反序（显示结果和新版有差异）

-webkit-box-orient：horizontal-webkit-box-direction：reverse（反序）

实现元素垂直方向反序（显示结果和新版有差异）

-webkit-box-orient：vertical-webkit-box-direction：reverse （反序）

弹性盒模型的富裕空间管理

主轴方向富裕空间新版（display：flex）老版（display：-webkit-box）

元素在主轴开始位置，富裕空间在主轴结束位置justify-content：flex-start-webkit-box-pack：start

元素在主轴结束位置，富裕空间在主轴开始位置 justify-content：flex-end -webkit-box-pack：end

元素在主轴中间位置，富裕空间在主轴两侧位置 justify-content：center -webkit-box-pack：center

富裕空间平均分配在每两个元素之间justify-content：space-between -webkit-box-pack：justify

富裕空间平均分配在每两个元素的两侧justify-content：space-around没有

侧轴方向富裕空间新版（display：flex） 老版（display：-webkit-box）

元素在侧轴开始位置，富裕空间在侧轴结束位置align-items：flex-start -webkit-box-align：start

元素在侧轴结束位置，富裕空间在侧轴开始位置align-items：flex-end -webkit-box-align：end

元素在侧轴中间位置，富裕空间在侧轴两侧位置align-items：center -webkit-box-align：center

根据侧轴方向上文字的基线对其 align-items：baseline没有

盒子的弹性空间（子元素的尺寸=盒子的尺寸*子元素的box-flex属性值/所有子元素的box-flex属性值的和）

盒子的弹性空间（加给子元素）设置元素的具体位置（加给子元素）

新版flex-grow：1；order：5（数值越小越靠前，可以接受0或者负值）

老版-webkit-box-flex：1；-webkit-box-ordinal-group：2（数值越小越靠前，最小值默认处理为1，将0或者负数转化为1）

媒体设备all 所有媒体braille盲文触觉设备embossed盲文打印机point手持设备projection打印预览

screen彩屏设备speech‘听觉’类似的媒体类型tty不使用像素设备tv电视

具体写法：@media 媒体设备@media only 设备类型（只有在特定的某种设备上识别）

and 连接媒体类型和媒体特性的（@media all and （min-width：500px））

媒体特性：min-width：当屏幕大于等于某个值得时候识别

max-width：当屏幕小于等于某个值得时候识别

not 关键字是用来排除某种制定的媒体类型

only 某种特定的媒体类型

@media （orientation：portrait）：屏幕垂直

@media（orientation：landscape）：屏幕水平

样式的引用方式：

1.样式表中末尾添加 @media all and （min-width：600px）{ }

2.link标签 <link rel="stylesheet" href="路径" media="all and（min-width：600px）" />

3.写在样式表头部 @important url（路径）（min-width：600px）；

touch事件：touchstart 手指触摸 touchmove 手指移动touchend 手指离开

移动端的点透：当上层元素发生点击的时候，下层元素也有点击（焦点）特性，在300ms之后，如果上层元素消失或者隐藏，目标点就会“漂移”到下层元素身上，就会触发点击事件

解决办法：1.下层不要使用有点击（焦点）特性的元素

2.阻止PC事件document.addEventListenter（‘touchstart’，function（ev）{ev.preventDefault（）}）

document.addEventListenter（‘touchstart’，function（ev）{ ev.preventDefault（）}）可以解决：

1.IOS10下设置meta禁止用户缩放是不可行的，可以用pc事件解决

2.解决IOS10下的溢出隐藏

3.禁止系统默认的滚动条、阻止橡皮筋效果

4.禁止长按选中文字、选中图片、系统默认菜单

5.解决点透问题

6.同时阻止了焦点元素的焦点行为（要想正常使用，ev.stopPropagation（）（阻止冒泡））

事件对象：

当给某个元素加上了事件绑定函数后，事件函数默认的第一个参数就是事件对象

时间对象：当用户在浏览器下触发了某个行为，事件对象会记录用户操作时的一些细节信息

touches 当前位于屏幕上的所有手指的一个列表

targetTouches 位于当前DOM元素上的手指的一个列表

changedTouches 设计当前事件的手指的一个列表