布局的时候，如果一个元素你想让他的宽高保持一定比例，而不随屏幕变革，宽高设置的时候，利用同一个单位都是CSS3的单位，低版本不兼容 <span style=\公众font-family: Arial, sans-serif; \"大众>1.移动端页面布局，利用相对的数值，不要利用绝对数值，推举利用%，vw，vh，rem，em</span>
2.兼容性：苹果设备微信逼迫利用的是os的浏览器safar，页面访问的体验远大于安卓；安卓情形比较乱套：知乎上有人说是微信6.0.2以上是逼迫利用的QQ的X5浏览器，但是实际情形来看（公司范围），一部分手机如（魅族，小米，一加，三星，LG等）利用的是X5内核，另一部分如（nexus，国靖的小米）利用的是chrome的内核， 由此来看，安卓上的访问情形大部分不容乐不雅观，会不支持某些属性和涌现一些非常。
3.履历之谈：UI给出的设计图越来越都雅了，但是对付前真个哀求就变高了，写页面之前，良好的页面构造设计可以极大地丰富了兼容性和扩展性，这个东西没有对错之分，只有好和更好。
4.移动真个动画：这次我利用的是jquery.animate，涌现情形，ios上各个设备均正常，但是安卓方面X5内核的动画卡顿严重。查阅资料，移动真个动画大部分利用CSS3和zepto.js，只管即便不该用jquery的，对付移动真个游戏动画，盛行canvas。
5.touch事宜：安卓支持click事宜，但是ios不支持，推举利用touch事宜；touch事宜基本类型：touchstart,touchmove,touchend,
对付之前需求中的剖断向上滑动，向左滑动，向右滑动等推举利用以下代码进行处理：
//返回角度
function GetSlideAngle(dx, dy) {
return Math.atan2(dy, dx) 180 / Math.PI;
}
//根据出发点和终点返回方向 1：向上，2：向下，3：向左，4：向右,0：未滑动
function GetSlideDirection(startX, startY, endX, endY) {
var dy = startY - endY;
var dx = endX - startX;
var result = 0;
//如果滑动间隔太短
if (Math.abs(dx) < 2 && Math.abs(dy) < 2) {
return result;
}
var angle = GetSlideAngle(dx, dy);
if (angle >= -45 && angle < 45) {
result = 4;
} else if (angle >= 45 && angle < 135) {
result = 1;
} else if (angle >= -135 && angle < -45) {
result = 2;
}
else if ((angle >= 135 && angle <= 180) || (angle >= -180 && angle < -135)) {
result = 3;
}
return result;
}
//滑动处理
var startX, startY;
document.addEventListener('touchstart', function (ev) {
startX = ev.touches[0].pageX;
startY = ev.touches[0].pageY;
}, false);
document.addEventListener('touchend', function (ev) {
var endX, endY;
endX = ev.changedTouches[0].pageX;
endY = ev.changedTouches[0].pageY;
var direction = GetSlideDirection(startX, startY, endX, endY);
switch (direction) {
case 0:
alert(\公众没滑动\"大众);
break;
case 1:
alert(\"大众向上\公众);
break;
case 2:
alert(\"大众向下\"大众);
break;
case 3:
alert(\公众向左\公众);
break;
case 4:
alert(\"大众向右\"大众);
break;
default:
}
}, false);
6.禁止滑屏：手指按住页面进行滑动，页面的动画会停滞，但是松手之后，动画已经完成，影响了用户体验，在某些情形下（页面只有一屏），该当禁止手指滑动，代码：
//禁止页面滚动
function forbidPageScroll(){
var stop=0;
document.addEventListener(\"大众touchmove\公众,function(e){
if(stop==0){
e.preventDefault();
e.stopPropagation();
}
},false);
}
7.音频：audio标签的自动播放autoplay，iOS不支持，并给出情由“这会导致用户的流量被窃取” 以是ios设备上禁止了自动播放功能，可以绑定touchmove事宜，用户点击屏幕任何一处都可以触发音频播放。安卓支持自动播放。
8.推举一个打乱数组顺序的大略的方法：
var boss = [1,2,3,4,5,6,7,8];
//打乱顺序
boss = boss.sort(function(){ return 0.5 - Math.random() });
H5游戏你可以看作是移动真个Web游戏，无需下载软件就可以体验，这便是H5在传播上的上风。一种快捷、即时性的游戏形式。
H5游戏的迅速盛行见告了大家，并不是画面极度精美，剧情严密的游戏才是游戏成功的唯一法则。虽然并不否认大型游戏能成功的说法，但随着人们空隙韶光的缩小，大略易上手的小游戏更能适应当下贱戏发展的趋势。
随着朋友圈在最近几年猖獗的盛行，越来越多的游戏从业者投入到H5游戏家当当中。比较较一个大型游戏创作的耗时耗力，H5游戏有着门槛更低、所需韶光更少的优点。
你可以像写网页一样写游戏，不须要太多的额外学习。相信在不久的游戏行业，将会大量的呈现出一大批的H5游戏。
总结起来就两点：
1.大略，随时随地能立马玩儿起来!
2.可以在朋友圈进行分享。
只要这两点，就能得到大量的用户。
