页面布局设计:
1,viewport 移动端视图 (标准的移动端设计图 width:375px 750px)
<meat name = "viewport"
显示宽的比例是矢量,根据手机显示宽度而定 / 缩放比例是1.0 / 不能进行手动缩放 /最大和最小 缩放比例是1.0
content = "width= device-width,initial-scale = 1.0,user-scaleable = no,maximum-scale= 1.0,minimum-scale = 1.0">
2,盒模型
box-sizing :border-box
3,flex布局
4,rem ------------------------重点不要用px
5,移动端布局viewport完美处理方式:---------------动态处理
<meat name = "viewport"
content = "width= device-width,initial-scale = 1.0,user-scaleable = no,maximum-scale= 1.0,minimum-scale = 1.0">
js 代码:
var clientWidth = document.documentElement.clientWidth, viewport = document.querySelector('meta[name="viewport"]'); viewportScale = clientWidth / 640; viewportWidth = 640; viewport.setAttribute('content', 'width=' + viewportWidth + ', initial-scale=' + viewportScale + ', maximum-scale=' + viewportScale + ', user-scalable=0'); }
达到设计图和代码值一样处理。
scrollWidth:对象的实际内容的宽度,不包边线宽度,会随对象中内容超过可视区后而变大。
clientWidth:对象内容的可视区的宽度,不包滚动条等边线,会随对象显示大小的变化而改变。
offsetWidth:对象整体的实际宽度,包滚动条等边线,会随对象显示大小的变化而改变。
6,移动端的touch事件
给元素注册touch移动端事件:
window.onload = function (){
var docum = document.getElementById('doc');
docum.addEventLister('touchstart',function(){
//注册手指触摸事件
},false);
}
-------------touches 不兼容 (--------------targetTouches =====全部兼容)
7,移动端单点多点事件
单点--------拖动,移动(典型------淘宝的轮播图)
多点--------缩小,放大 /旋转 会涉及到缩小放大比例,a = (原生)b/c(当前) 旋转(旋转的角度rtan())
targtouches changetouches
8,移动端
iscroll.js 移动端
hammer 移动端
常用h5:
1,window.navigator.userAgent ----------Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36
2,获取地里位置的方式
IP地址定位数据
GPS地理定位数据
wi-fi地理定位数据
手机地理定位数据
用户自定定位数据
3,geolocation 分为单次定位请求和重复定位请求
单次定位更新:navigator.geolocatin.getCurrentPostion(updateLocation,handleLocationError);
重复定位更新:navigator.geolocation.watchPostion(updateLocation,handleLocationError);
关闭重复定位的实时更新 var watchID = navigator.geolocation.watchPostion(updateLocation,handleLocationError);
关闭实时请求需要定位的返回对象 navigator.geoloction.clearWatch(watchID);
图表设计类:
1,新增画图应用
canvas
SVG
VML
2,
gl = 获取canvas的id值:
let gl = oc.getContext('2d');
gl.moveTo(19,233); 起点
gl.lineTo(12,111); 路径
gl.closeP ath(); 闭合
gl.storke(); 描边画图
gl.fill(); 填充画图
改变边线: gl.lineWidth = '12';
边线颜色: gl.storkeStyle='red';
填充颜色: gl.fillStyle = 'red';