一個H5項目的實踐與總結
一、背景來源：
9月份找工作的時候，接到騰訊筆試題，一個H5項目，于是自己花了三天時間去做，交給了面試官后，面試官要求我再優化一下，可惜當時自己不懂事，以為沒啥希望，就沒有去優化和爭取；選擇另外一家公司入職了，現在想想后悔不已，如果再給我一次機會，我一定好好珍惜<(?????)>。最近兩天有時間，重構、優化了下這個項目。發現自己之前寫得有點糟糕，當然現在優化得可能還是不夠好(/ □ \)，看下現在的效果：
二、實踐：
1.rem響應式布局:
我之前用媒體查詢，html的font-size設置為10px：
/媒詢/
/* html{
font-size: 10px;
height: 100%;
font-family: "Microsoft Yahei";
-webkit-text-size-adjust: none;
}
@media screen and (max-width:349px) {
html {
font-size: 10px;
-webkit-text-size-adjust: none;
}
}
@media screen and (min-width:350px) and (max-width:374px) {
html {
font-size: 11px;
-webkit-text-size-adjust: none;
}
}
@media screen and (min-width:375px) and (max-width:410px) {
html {
font-size: 12px;
-webkit-text-size-adjust: none;
}
}
@media screen and (min-width:411px){
html {
font-size: 13px;
-webkit-text-size-adjust: none;
}
} */
View Code</code></pre>
這個導致的結果是，在chrome瀏覽器下，一直都是12px，我自己調試的時候發現無論怎么設置圖片的rem，圖片的寬度都沒有變化，所以需要注意：
問：設置html font-size:10px;Chrome下1rem=12px,在火狐下1rem == 10px;為什么？如何讓Chrome 1rem=10px？
答：因為谷歌瀏覽器里，字體最小大小為12px，無法再小了 你可以再css里面加上這句 -webkit-text-size-adjust:none; 這樣就可以了，
追答： 不管用，這條樣式在最新版的chrome里已經棄用了。
所以后面我用了這種辦法來實現rem響應式布局（拿到的設計稿是640px）
(function (doc, win) {
var docEl = doc.documentElement,
resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
recalc = function () {
var clientWidth = docEl.clientWidth;
if (!clientWidth) return;
if(clientWidth>=640){
docEl.style.fontSize = '100px';
}else{
docEl.style.fontSize = 100 * (clientWidth / 640) + 'px';
}
};
if (!doc.addEventListener) return;
win.addEventListener(resizeEvt, recalc, false);
doc.addEventListener('DOMContentLoaded', recalc, false);
})(document, window);
</code></pre>
這樣在不同移動設備下的font-size為：
iphone5：
iphone6:
（注意：這種情況下，以640px的設計稿為準，對應設計稿的切圖，直接以原圖大小保存就好，切出來的圖片，寬度設置為設計稿中的尺寸除以100。布局時，設計圖標注的尺寸除以100得到css中的尺寸）
2.對于第三頁布局的重構：
①.畫線動畫：
<div class="page3_line2">
<div class="page3_line2_div">
</div>
</div>
.page3_line2 {
position: absolute;
z-index: 55;
transform: rotate(170deg);
overflow: hidden;
top: .35rem;
right: .5rem;
}
.page3_line2_div {
margin-left: -100%;
width: 3.8rem;
height: 1px;
background: #cdb04a;
transition: all 0.4s 0.6s;
}
.page3_line2_div_move {
margin-left: 0px;
}
這個.page3_line2_div_move是在js中添加的
//第三頁，需要畫線
if (this._curIndex == 2) {
setTimeout(function() {
$(".page3_line1_div").addClass('page3_line1_div_move');
$(".page3_midstar").addClass('page3_midstar_move');
$(".page3_line_div").addClass('page3_line1_div_move');
$(".page3_smallstar").addClass('page3_midstar_move');
$('.page3_txt1').addClass('txtleft_animate');
$('.page3_home').addClass('page3_home_move');
$('.page3_point').addClass('page3_point_move');
$('.page3_line2_div').addClass('page3_line2_div_move');
$('.page3_point2').addClass('page3_point2_move');
$('.page3_prostar').addClass('page3_prostar_move');
$('.page3_line3_div').addClass('page3_line3_div_move');
$('.page3_txt2').addClass('txtleft_animate');
$('.page3_point3').addClass('page3_point3_move');
$('.page3_fly').addClass('page3_fly_move');
$('.page3_txt3').addClass('txtleft_animate');
$('.page3_line4_div').addClass('page3_line4_div_move');
$('.page3_point4').addClass('page3_point4_move');
$('.page3_q').addClass('page3_stamp_move');
$('.page3_stamp').addClass('page3_stamp_move');
}, 500);
View Code</code></pre>
動畫的先后出現順序都是通過
transition: all 0.4s 0.6s;
最后一個參數（0.6s）來控制的。
②.移動設備適配性問題：
這里要注意下布局的技巧，或者說是布局的規范，為了實現畫線過程中，點與線銜接，需要在這些元素外面額外加一個div，設置為position：relative；然后里面的點與線的div都設置為position：absolute；以父級div位置作為參考，然后再對里面的點與線布局，這樣就能保證他們的位置始終是契合的。
我的頁面布局為：
<div class="page3_point_line_wrap">
<div class="page3_point"></div>
<div class="page3_line2">
<div class="page3_line2_div">
</div>
</div>
<div class="page3_point2"></div>
<img src="img/page3_star.png" class="page3_prostar">
<div class="page3_txt2">已累計獲得5星<span>2次</span>啦</div>
<div class="page3_line3">
<div class="page3_line3_div">
</div>
</div>
<div class="page3_point3"></div>
<img src="img/page3_fly.png" class="page3_fly">
<div class="page3_txt3">超越了<span>92.6%</span>的鵝廠精英</div>
<div class="page3_line4">
<div class="page3_line4_div">
</div>
</div>
<div class="page3_point4"></div>
<img src="img/page3_q.png" class="page3_q">
<img src="img/page3_stamp.png" class="page3_stamp">
</div>
View Code</code></pre>
把最外層div設置為position: relative;
.page3_point_line_wrap {
position: relative;
}
里面的元素根據設計圖位置布局。
測試后，發現這種做法適配了移動端各種設備。之前我的布局沒有考慮到這些，直接布局，導致出現不同移動端設備下，出現布局混亂的情況。
3.hammer.js的應用：
滑動效果的實現是用了hammer.js；作業交過去后，面試官提出，滑動效果不太順暢，看了下代碼，發現可能的原因是這里：
var onEnd = function(e) {
var deltaY = e.deltaY;
//滑動Y軸偏移量少于一定最少距離 ，保留在當前頁
if (Math.abs(deltaY) < self.minDis) {
// debugger;
self.toNext(e);
} else {
if (deltaY < 0) {
self.toNext(e);
} else {
self.toPrev();
}
}
//停止動作
var _distanY = self.winHeight * (self._curIndex);
self.toPosition(_distanY);
}
</code></pre>
滑動Y軸偏移量少于一定最少距離，保留在當前頁，之前是沒有self.toNext(e)這個方法。后面我添加這個方法試了下，好像是會順暢些。滑動頁面還要注意有動畫效果：
.page_animate_0d5s {
height: 100%;
position: relative;
transform: translate3d(0px, 0px, 0px);
transition: all 700ms ease;
}
三、總結：
可取之處：
1.代碼的命名；（以頁面為準，每頁的命名加個page(1-7)，這樣方便自己維護代碼；圖片的命名也比較規范，屬于哪一頁的圖，會在前面加個page(1-7) ）。
2.注釋及代碼格式；（自己重構的過程中，不會覺得混亂，可能是因為是自己寫過的代碼 （￣工￣lll） ）。
不足之處：
1.缺乏思考；之前有參與公司的移動端項目，不過也是別人搭好的框架（用的是媒體查詢），然后寫了幾個簡單的頁面，沒有從整體去思考，移動端該怎么布局，比如內容頁面需要設置一個最大寬度max-width。
2.對自己寫的代碼要求過低，代碼不夠規范；工作中，也有負責過一個簡單H5項目，沒有涉及到什么動畫及點線組合，現在想想當時自己寫的應該也是有適配性問題，慚愧 ( # ▽ # ) 。
3.多去學習，實踐；響應式布局，我還只會用這個方法的rem布局，不會淘寶的做法（ lib-flexible ），hammer.js這個好像還有更好的替代者（ AlloyFinger ），我暫時都沒用過 (┬＿┬) 。
4.再想想，也不是想要自己學太多；希望自己能理解自己用到的，然后把代碼寫好 (?ˇ?ˇ?) 。
最后：
我的這個H5項目可以在這里看： 線上效果 。
代碼在： 源代碼 （這個弄得有點尷尬⊙﹏⊙‖∣）
來自：http://www.cnblogs.com/wj204/p/6078776.html