基情探测器心得

1、settimeout不要嵌套；
2、settimeout最好用变量的形式，可以看到与其他延迟的关联；
3、每次发布或者上传之前检查清楚，先打开浏览器看看有没有什么语法问题，微信分享记得改统计数据和分享数据，一定要确保万无一失才能找后台发布（因为他凶···）
4、屏幕适配可以根据宽高比来 @media only screen and (min-aspect-ratio: 65/100)；

5、这样写是有问题的

function showAnimate(){
    var plugMove= 1000;
    var lightTrigger = 500;
    var scanOnce = 2000;

    var plugMoveTimer = setTimeout(function(){
        $('.plugImg').animate({top: '80%', opacity: '1'});
    });

    var lightTriggerTimer = setTimeout(function(){
        $('.routeL').animate({opacity: 1}, (plugMove));
        $('.routeR').animate({opacity: 1}, (plugMove));
    })

    var startScanTimer = setTimeout(startScan, (plugMove + lightTrigger));
}

解决方法 给父容器添加-webkit-writing-mode: vertical-lr;

setTimeout是一个函数，如果里面不是调用的匿名函数形成闭包则无法访问到局部变量；

 

6、关于margin-top百分比的问题其实margin-top和margin-bottom的百分比，一般是按容器元素的宽度而不是高度来计算的，padding同理。

所以这样让div垂直居中是不对的

.waiteWrap{
    height: 100%;
    width: 100%;
    position: relative;
}
.waiteInner{
    height: 26%;
    width: 100%;
    position: absolute;
    top: 50%;
    margin-top: -13%;
    background-color: red;
}

 

解决方法给父容器添加-webkit-writing-mode: vertical-lr;

ps: 已知高度的话··其实只要算一下就好啦

7、关于position absolute问题

子元素只受父元素本来的Size 影响 与border margin padding 都无关；