移动端问题集合（一）

刚写了移动端的一个页面，过程中遇到很多问题，现来汇总

1. 滚动事件中获取元素高度问题

该页面用到很多CSS3动画，需要根据元素高度判断动画执行时间。
问题：元素到顶部高度获取不准确！！！

• 原因：引入的自适应屏幕的js导致的。。。因为自适应屏幕需要时间，所以立马获取的目标高度不准确！！！
• 解决办法：将自适应js中的函数在index.js中先执行一下。

//引入的rem.js
window.onload = function(){
  /*720代表设计师给的设计稿的宽度，你的设计稿是多少，就写多少;100代表换算比例，这里写100是
    为了以后好算,比如，你测量的一个宽度是100px,就可以写为1rem,以及1px=0.01rem等等*/
  getRem(750,100)
};
window.onresize = function(){
  getRem(750,100)
};
function getRem(pwidth,prem){
  var html = document.getElementsByTagName("html")[0];
  var oWidth = document.body.clientWidth || document.documentElement.clientWidth;
  html.style.fontSize = oWidth/pwidth*prem + "px";
}
//自定义的index.js
//先执行一下 getRem(750,100)，再获取高度
getRem(750,100)；
var height=$(".wrpName").offset().top
//此次获取的高度才是真正的高度

2.数字滚动问题

//代码,可以直接拿去用
//css
    div.numbox{
        display:inline-block;
    }
    div.numitem {
        display:inline-block;
        width:2rem;
        height:2rem;
        font-family:微软雅黑;
        font-size:1.5rem;
        overflow:hidden;
        margin-left:1px;
        background-color:#eee;
    }
    div.numvaluebg{
        padding:0px;
        width:100%;
        height:100%;
        position:relative;
    }
    div.numvalue{
        width:100%;
        text-align:center;
        height:100%;
        overflow:hidden;
    }
//js
    function CNumHtmlStruct(id){
        var htmls = [];
        htmls.push("
");
        for(var i=0; i<6; i++){
            htmls.push("
");
            htmls.push("
");
            for(var n=0; n<2; n++){
                for(var ii=0; ii<10; ii++){
                    htmls.push("
" + ii + "
");
                }
            }
            htmls.push("
");
            htmls.push("
");
        }
        htmls.push("
");
        document.write(htmls.join(""));
    }
    function RefreshNum(id, num){
        var nums = (num + "");
        var box = document.getElementById(id);
        for (var i=0; i //这个div可以根据自己的需要设置

目前总访问人数

 刷新
 

3.a标签在获取焦点时高亮背景的问题
![avatar]（https://images2017.cnblogs.com/blog/1149666/201709/1149666-20170928155953825-1646013407.gif）

a标签下设置该属性即可
-webkit-tap-highlight-color: rgba(0,0,0,0);

4.img与父级div之间的空隙问题

img标签是一个行内块元素，与其他元素之间产生缝隙是因为空格问题，以下是3种解决方法

• 把img标签的display属性改成block：
  img{dispaly:block;}
• 把父级div中的字体大小设为0：
  div{font-size:0;}
• 修改img的vertical-align属性：
  img{vertical-align:buttom;}
  img{vertical-align:middle;}
  img{vertical-align:top;}
  5.暂时先写这么多，回去补