★ ★ ★ ★ ★ ★ ★ ★ ★ ★ wap端问题及解决方法 ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★ ★
一、wap端弹窗
.Dialogbg-Select{
background-color: #000; height: 100%; left: 0; opacity: 0.85;
position: fixed; top: 0; width: 100%; z-index: 200; display: none;
}.Dialog-Select{
background: #fff none repeat scroll 0 0;
box-shadow: 0 0 0 #999;
font-size:px2rem(14);
width:px2rem(600);
height:px2rem(660);
margin-top: px2rem(-330);
margin-left: px2rem(-300);
left: 50%;
padding: 0;
position: fixed;
top: 50%;
z-index: 99999; display: none; border-radius:px2rem(20);
}<div class="Dialogbg-Select" ontouchmove="return false;"></div> /*禁止弹窗滑动滚动*/
<div class="Dialog-Select" ontouchmove="return false;">
<div class="s-closes"></div>
<div class="Select" ontouchmove="return false;"> <p></p> </div>
</div>==================================================================
二、wap端兼容小屏的做法
@media screen and (max-width: 320px) {
.sel-li{ top: px2rem(-10) !important; }
i{top:px2rem(3) !important; }
}================================================================
三、px转rem。
1.通过sass自动编译
<script src="http://edm.mcake.com/weifengwang/common/flexible.js"></script>
@function px2rem($n) {
@return ($n * 10 / 750) * 1rem;
}=================================================================
2.手动转rem 实际像素 * 10 / 750 = 需要的rem
也可以简单理解为：实际像素/75 = 需要的rem
比如：300px-->4rem
50px-->.666rem
3.js函数方式
/*px转成rem的方法*/
function px2rem(d) {
var val = parseFloat(d) * 10 / 750;
if (typeof d === 'string' && d.match(/px$/)) {
val += 'rem';
}
return val;
}
window.px2rem = px2rem;=================================================================
四、wap端头部meta常用设置
<meta name="viewport" content="initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">
=================================================================
五、判断横屏和竖屏
/*移动端通用
*判断手机横竖屏状态
* 翻转屏幕自动刷新页面
*/
function hengshuping() {
if (window.orientation == 180 || window.orientation == 0) {
window.location.reload();/*竖屏状态*/
}
if (window.orientation == 90 || window.orientation == -90) {
window.location.reload(); /*横屏状态*/
}
}
window.addEventListener("onorientationchange" in window ? "orientationchange" : "resize", hengshuping, false);=================================================================
六、动画制作 参考“manyuemei”项目
第一步：切图png,把每一帧都切出来
第二步：使用TextureMerger序列帧动画，【导出】序列帧合成的图片和对应的json，并生成mym-a.json
第三步：使用ResDepot，生成资源配置res.json （把png生成在配置里面，json不可以生成在里面）
<div class="q1"> <canvas width="240" height="241" id="mym-a"></canvas></div>
.q1{ top:px2rem(311); left:auto; right: px2rem(10);
canvas {
width:px2rem(179);
height: px2rem(165);
}
}var animates = {
mymA:function () {
//图片配置
var mcConfig = {
"mym-a-1":{"x":420,"y":975,"w":208,"h":193,"offX":11,"offY":23,"sourceW":240,"sourceH":241},
"mym-a-2":{"x":210,"y":975,"w":208,"h":193,"offX":11,"offY":24,"sourceW":240,"sourceH":241},
"mym-a-3":{"x":0,"y":975,"w":208,"h":193,"offX":11,"offY":24,"sourceW":240,"sourceH":241},
"mym-a-4":{"x":1680,"y":780,"w":208,"h":193,"offX":11,"offY":25,"sourceW":240,"sourceH":241}
};
// MovieClip 可以通过duration控制两张图片轮播的速度。duration:0.2*10=2
new MovieClip('mym-a', loader.get('mym-a_png').data,formatResData(mcConfig)).play();
}
}animates.mymA();==================================================================
七、微信打开网页键盘弹起后页面会被顶上去，键盘收起，页面没有回到原来的位置
解决方案：在点击按钮那里或者是input失去焦点时加下面其中一个即可解决。 通过scrollTop滚动来解决。
scrollTop ，有bug，如果连续点击input切换的话，会出现滚动的位置错乱
$("input").blur(function () {
$("html,body").animate({scrollTop: document.documentElement.clientHeight},500);
});或者是scrollTo ，有bug
//滚动到顶部 window.scrollTo(0, 0); //滚动到底部 window.scrollTo(0, document.documentElement.clientHeight);
完美解决方案： 无bug(根据当前滚动条的位置来计算，失去焦点后，重新让滚动条滚动到之前的位置，太完美了)
$("input").blur(function () {
setTimeout(function() {
var scrollHeight = document.documentElement.scrollTop || document.body.scrollTop || 0;
window.scrollTo(0, Math.max(scrollHeight - 1, 0));
}, 100);
});测试连接：https://img.zai-art.com/web/app/demo/weixin.html
相关文章：微信打开网页键盘弹起后页面会被顶上去，键盘收起，页面无法回到原来的位置，导致弹框里的按钮响应区域错位 position为fixed
==================================================================
八、手机端公告无缝滚动，纯css3实现
<div class="moveBox">
<div class="move">
<div class="item">温馨提示：2019年2月4日当天最晚配送时间为下午18：00，给您带来不便，还望见谅！</div>
<div class="item">温馨提示：2019年2月4日当天最晚配送时间为下午18：00，给您带来不便，还望见谅！</div>
</div>
</div>/*公告无缝滚动*/
.moveBox{position: relative; width:100%; margin: 0 auto px2rem(50); overflow: hidden; white-space:nowrap; }
.move{; left:100%; white-space:nowrap; animation:moveAni 15s infinite linear normal; }
.item{float: left; width:px2rem(800); font-size: px2rem(20);}
@keyframes moveAni{
0%{left:;}
100%{left: px2rem(-800); } /*这里的滚动距离要和item的宽度保持一致，才可以实现无缝滚动*/
}