剛寫了移動端的一個頁面菠发，過程中遇到很多問題，現(xiàn)來匯總
- 滾動事件中獲取元素高度問題
該頁面用到很多CSS3動畫碰逸，需要根據(jù)元素高度判斷動畫執(zhí)行時間忿薇。
問題：元素到頂部高度獲取不準(zhǔn)確Ｈ雇帧！署浩！
- 原因：引入的自適應(yīng)屏幕的js導(dǎo)致的。扫尺。筋栋。因為自適應(yīng)屏幕需要時間，所以立馬獲取的目標(biāo)高度不準(zhǔn)確Ｕぁ１兹痢！
- 解決辦法：將自適應(yīng)js中的函數(shù)在index.js中先執(zhí)行一下姑曙。
//引入的rem.js
window.onload = function(){
/*720代表設(shè)計師給的設(shè)計稿的寬度襟交，你的設(shè)計稿是多少，就寫多少;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
//先執(zhí)行一下 getRem(750,100)，再獲取高度
getRem(750,100)宴合；
var height=$(".wrpName").offset().top
//此次獲取的高度才是真正的高度
2.數(shù)字滾動問題
//代碼,可以直接拿去用
//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("<div class='numbox' id='" + id + "'>");
for(var i=0; i<6; i++){
htmls.push("<div class='numitem'>");
htmls.push("<div class='numvaluebg'>");
for(var n=0; n<2; n++){
for(var ii=0; ii<10; ii++){
htmls.push("<div class='numvalue'>" + ii + "</div>");
}
}
htmls.push("</div>");
htmls.push("</div>");
}
htmls.push("</div>");
document.write(htmls.join(""));
}
function RefreshNum(id, num){
var nums = (num + "");
var box = document.getElementById(id);
for (var i=0; i<nums.length ; i++)
{
var bgbox = box.children[i].children[0];
var boxstyle = bgbox.style;
var topv = ( bgbox.children.length-10 + nums.substr(i,1)*1)*100;
boxstyle.transitionProperty = "all";
boxstyle.transitionDuration = "1s";
boxstyle.transitionTimingFunction = "ease";
boxstyle.transform = "translateY(-" + topv + "%)";
}
}
//html
<div style='margin:100px;border:1px dotted #ccc;padding:20px'> //這個div可以根據(jù)自己的需要設(shè)置
<script>CNumHtmlStruct('numbox1');</script>
目前總訪問人數(shù)
<a href='[javascript:void(0)](about:blank)' onclick="RefreshNum('numbox1',520500)">
刷新
</a>
</div>
3.a標(biāo)簽在獲取焦點時高亮背景的問題
![avatar]（https://images2017.cnblogs.com/blog/1149666/201709/1149666-20170928155953825-1646013407.gif）
a標(biāo)簽下設(shè)置該屬性即可
-webkit-tap-highlight-color: rgba(0,0,0,0);
4.img與父級div之間的空隙問題
img標(biāo)簽是一個行內(nèi)塊元素焕梅，與其他元素之間產(chǎn)生縫隙是因為空格問題，以下是3種解決方法
- 把img標(biāo)簽的display屬性改成block：
img{dispaly:block;} - 把父級div中的字體大小設(shè)為0：
div{font-size:0;} - 修改img的vertical-align屬性：
img{vertical-align:buttom;}
img{vertical-align:middle;}
img{vertical-align:top;}
5.暫時先寫這么多卦洽，回去補
