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 设计当前事件的手指的一个列表