H5页面（一）之分层适配

添加小程序&＃xff0c;兑换各种视频教程/数据资源。

H5页面开发的必备的几个知识点&＃xff1a;

1. 适配&＃xff1a;常用的包括分层适配和rem。

2. 加载进度。

3. 页面切换效果&＃xff1a;可以参考jquery ui官网。

4. 长按截屏&＃xff1a;参考html2canvas插件。

5. 轮播图&＃xff1a;swiper插件。

6. 左右菜单联动&＃xff0c;上下滚动加载&＃xff1a;better-scroll插件。

7. 图片360度旋转&＃xff1a;spritespin.js插件。

8. 背景雪花飘落的效果&＃xff1a;百度。

9. 游戏框架&＃xff1a;createjs和egret.js框架。

10. 动画效果插件&＃xff1a;animate.css。

0. 布局样式&＃xff1a;

1. 分层视频的重置css样式&＃xff1a;

* {margin: 0;padding: 0;-webkit-touch-callout: none;-webkit-overflow-scrolling: touch;-webkit-tap-highlight-color: rgba(255,0,0,0);font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Helvetica, "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", SimSun, sans-serif;
}
body {margin: 0;padding: 0;overflow: hidden;
}
.page {position: absolute;overflow: hidden;top: 0;/* display: none;*/
}
.container {position: absolute;
}
.hide{display: none;
}
.scroll-view {     //y轴滚动样式position: absolute;transform-origin: 0% 0%;overflow: hidden;overflow-y: auto;
}.bg, .content {position: absolute;transform-origin: 0% 0%;
}
.show{display: block;
}.swiper-container .page{display:block;
}.abs {position: absolute;
}
.h-center {     //相对、绝对定义下的左右居中样式left: 0;right: 0;margin: auto;
}
.v-center {   //相对、绝对定义下的上下居中样式top: 0;bottom: 0;margin: auto;}.fl{float:left;}.fr{float:right;}.clearfloat{zoom:1;}.clearfloat:after{content:&＃39;&＃39;;display:block;clear:both;height:0;overflow:hidden;visibility:hidden;}

2. 分层适配封装适配adatper函数&＃xff1a;

function adatper(zWidth, zHeight, callback) {    //zWidth&＃xff0c;zHeight为设计图的宽高&＃xff0c;callback为适配之后的回调函数。var w &＃61; window.innerWidth;        //1. 获取页面设备的宽w&＃xff0c;h高。var h &＃61; window.innerHeight;$(&＃39;.container, .page, .scroll-view, .swiper-container, .swiper-wrapper, .swiper-slide&＃39;).css({width: window.innerWidth &＃43; &＃39;px&＃39;,height: window.innerHeight &＃43; &＃39;px&＃39;});                                               //2. 设置页面.container&＃xff0c;.page的的宽高为设备的宽高。$(&＃39;.bg, .content&＃39;).css({             //3. 设置页面.bg&＃xff0c;.content的宽高为设计图的宽高。width: zWidth &＃43; &＃39;px&＃39;,height: zHeight &＃43; &＃39;px&＃39;})//4. 设备宽与图纸宽的比值 &＃xff0c;和设备高与图纸高的比值&＃xff0c;两个比值的最大值bjZoom是页面背景.bg的缩放比例&＃xff0c;最小值contentZoom 是页面内容.content的缩放比例。var bjZoom &＃61; Math.max(window.innerWidth / zWidth, window.innerHeight / zHeight);var contentZoom &＃61; Math.min(window.innerWidth / zWidth, window.innerHeight / zHeight);//5. x1&＃xff0c;y1是页面背景.bg的x轴,y轴的平移位置。var x1 &＃61; ((window.innerWidth - zWidth * bjZoom) / 2).toFixed(2);var y1 &＃61; ((window.innerHeight - zHeight * bjZoom) / 2).toFixed(2);//6. x2&＃xff0c;y2是页面内容.content的x轴,y轴的平移位置。var x2 &＃61; ((window.innerWidth - zWidth * contentZoom) / 2).toFixed(2);var y2 &＃61; ((window.innerHeight - zHeight * contentZoom) / 2).toFixed(2);//7. js设置.bg的缩放比例和x轴和y轴的位移&＃xff0c;以及浏览器的兼容问题。$(&＃39;.bg&＃39;).css({&＃39;transform&＃39;: &＃39;translate(&＃39; &＃43; x1 &＃43; &＃39;px, &＃39; &＃43; y1 &＃43; &＃39;px) scale(&＃39; &＃43; bjZoom &＃43; &＃39;)&＃39;,&＃39;-webkit-transform&＃39;: &＃39;translate(&＃39; &＃43; x1 &＃43; &＃39;px, &＃39; &＃43; y1 &＃43; &＃39;px) scale(&＃39; &＃43; bjZoom &＃43; &＃39;)&＃39;,msTransform: &＃39;translate(&＃39; &＃43; x1 &＃43; &＃39;px, &＃39; &＃43; y1 &＃43; &＃39;px) scale(&＃39; &＃43; bjZoom &＃43; &＃39;)&＃39;,mozTransform: &＃39;translate(&＃39; &＃43; x1 &＃43; &＃39;px, &＃39; &＃43; y1 &＃43; &＃39;px) scale(&＃39; &＃43; bjZoom &＃43; &＃39;)&＃39;,oTransform: &＃39;translate(&＃39; &＃43; x1 &＃43; &＃39;px, &＃39; &＃43; y1 &＃43; &＃39;px) scale(&＃39; &＃43; bjZoom &＃43; &＃39;)&＃39;});//7. js设置.content的缩放比例和x轴和y轴的位移&＃xff0c;以及浏览器的兼容问题。$(&＃39;.content&＃39;).css({&＃39;transform&＃39;: &＃39;translate(&＃39; &＃43; x2 &＃43; &＃39;px, &＃39; &＃43; y2 &＃43; &＃39;px) scale(&＃39; &＃43; contentZoom &＃43; &＃39;)&＃39;,&＃39;-webkit-transform&＃39;: &＃39;translate(&＃39; &＃43; x2 &＃43; &＃39;px, &＃39; &＃43; y2 &＃43; &＃39;px) scale(&＃39; &＃43; contentZoom &＃43; &＃39;)&＃39;,msTransform: &＃39;translate(&＃39; &＃43; x2 &＃43; &＃39;px, &＃39; &＃43; y2 &＃43; &＃39;px) scale(&＃39; &＃43; contentZoom &＃43; &＃39;)&＃39;,mozTransform: &＃39;translate(&＃39; &＃43; x2 &＃43; &＃39;px, &＃39; &＃43; y2 &＃43; &＃39;px) scale(&＃39; &＃43; contentZoom &＃43; &＃39;)&＃39;,oTransform: &＃39;translate(&＃39; &＃43; x2 &＃43; &＃39;px, &＃39; &＃43; y2 &＃43; &＃39;px) scale(&＃39; &＃43; contentZoom &＃43; &＃39;)&＃39;});// 宽度缩放var zoomWidth &＃61; window.innerWidth / zWidth;// y轴滚动$(&＃39;.scroll-view&＃39;).css({&＃39;transform&＃39;: &＃39;scale(&＃39; &＃43; zoomWidth &＃43; &＃39;)&＃39;,&＃39;-webkit-transform&＃39;: &＃39;scale(&＃39; &＃43; zoomWidth &＃43; &＃39;)&＃39;,&＃39;width&＃39;: w / zoomWidth &＃43; &＃39;px&＃39;,&＃39;height&＃39; : h / zoomWidth  &＃43; &＃39;px&＃39;});// 高度缩放var hZoom &＃61; window.innerHeight / zHeight;// x轴滚动$(&＃39;.content-x-scroll-view&＃39;).css({width: window.innerWidth / hZoom &＃43; &＃39;px&＃39;,height: window.innerHeight / hZoom &＃43; &＃39;px&＃39;,&＃39;-webkit-transform&＃39;: &＃39;scale(&＃39; &＃43; hZoom &＃43; &＃39;)&＃39;});$(&＃39;.definezoom&＃39;).css({zoom: zoomWidth});if (typeof (callback) &＃61;&＃61; &＃39;function&＃39;) {callback();}}