<h3>一、背景来源：</h3>    <p>9月份找工作的时候，接到腾讯笔试题，一个H5项目，于是自己花了三天时间去做，交给了面试官后，面试官要求我再优化一下，可惜当时自己不懂事，以为没啥希望，就没有去优化和争取；选择另外一家公司入职了，现在想想后悔不已，如果再给我一次机会，我一定好好珍惜<(▰˘◡˘▰)>。最近两天有时间，重构、优化了下这个项目。发现自己之前写得有点糟糕，当然现在优化得可能还是不够好(/ □ \)，看下现在的效果：</p>    <p><img src="https://simg.open-open.com/show/8286e94ad2d45d1c535b29ee5882ed24.gif"></p>    <h3>二、实践：</h3>    <p>1.rem响应式布局:</p>    <p>我之前用媒体查询，html的font-size设置为10px：</p>    <pre>  <code class="language-html">  /*媒询*/  /* 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>    <p>这个导致的结果是，在chrome浏览器下，一直都是12px，我自己调试的时候发现无论怎么设置图片的rem，图片的宽度都没有变化，所以需要注意：</p>    <p>问：设置html font-size:10px;Chrome下1rem=12px,在火狐下1rem == 10px;为什么？如何让Chrome 1rem=10px？</p>    <p>答：因为谷歌浏览器里，字体最小大小为12px，无法再小了 你可以再css里面加上这句 -webkit-text-size-adjust:none; 这样就可以了，</p>    <p>追答： 不管用，这条样式在最新版的chrome里已经弃用了。</p>    <p>所以后面我用了这种办法来实现rem响应式布局（拿到的设计稿是640px）</p>    <pre>  <code class="language-html">(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>    <p>这样在不同移动设备下的font-size为：</p>    <p>iphone5：</p>    <p><img src="https://simg.open-open.com/show/9e5d6c36c79ffa8912993d110f020d6a.png"></p>    <p>iphone6:</p>    <p><img src="https://simg.open-open.com/show/7c9456559051594229999f2479bdecf4.png"></p>    <p>（注意：这种情况下，以640px的设计稿为准，对应设计稿的切图，直接以原图大小保存就好，切出来的图片，宽度设置为设计稿中的尺寸除以100。布局时，设计图标注的尺寸除以100得到css中的尺寸）</p>    <p>2.对于第三页布局的重构：</p>    <p><img src="https://simg.open-open.com/show/77ab9de5a568499987d2456783c85e3a.png"></p>    <p>①.画线动画：</p>    <pre>  <code class="language-html"><div class="page3_line2">     <div class="page3_line2_div">     </div>  </div>  </code></pre>    <pre>  <code class="language-html">.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;  }  </code></pre>    <p>这个.page3_line2_div_move是在js中添加的</p>    <pre>  <code class="language-html">  //第三页，需要画线          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>    <p>动画的先后出现顺序都是通过</p>    <pre>  <code class="language-html">transition: all 0.4s 0.6s;</code></pre>    <p>最后一个参数（0.6s）来控制的。</p>    <p>②.移动设备适配性问题：</p>    <p>这里要注意下布局的技巧，或者说是布局的规范，为了实现画线过程中，点与线衔接，需要在这些元素外面额外加一个div，设置为position：relative；然后里面的点与线的div都设置为position：absolute；以父级div位置作为参考，然后再对里面的点与线布局，这样就能保证他们的位置始终是契合的。</p>    <p>我的页面布局为：</p>    <pre>  <code class="language-html">     <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>    <p>把最外层div设置为position: relative;</p>    <pre>  <code class="language-html">.page3_point_line_wrap {      position: relative;  }  </code></pre>    <p>里面的元素根据设计图位置布局。</p>    <p>测试后，发现这种做法适配了移动端各种设备。之前我的布局没有考虑到这些，直接布局，导致出现不同移动端设备下，出现布局混乱的情况。</p>    <p>3.hammer.js的应用：</p>    <p>滑动效果的实现是用了hammer.js；作业交过去后，面试官提出，滑动效果不太顺畅，看了下代码，发现可能的原因是这里：</p>    <pre>  <code class="language-html">        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>    <p>滑动Y轴偏移量少于一定最少距离，保留在当前页，之前是没有self.toNext(e)这个方法。后面我添加这个方法试了下，好像是会顺畅些。滑动页面还要注意有动画效果：</p>    <pre>  <code class="language-html">.page_animate_0d5s {      height: 100%;      position: relative;      transform: translate3d(0px, 0px, 0px);      transition: all 700ms ease;  }  </code></pre>    <h3>三、总结：</h3>    <p>可取之处：</p>    <p>1.代码的命名；（以页面为准，每页的命名加个page(1-7)，这样方便自己维护代码；图片的命名也比较规范，属于哪一页的图，会在前面加个page(1-7) ）。</p>    <p>2.注释及代码格式；（自己重构的过程中，不会觉得混乱，可能是因为是自己写过的代码 （￣工￣lll） ）。</p>    <p>不足之处：</p>    <p>1.缺乏思考；之前有参与公司的移动端项目，不过也是别人搭好的框架（用的是媒体查询），然后写了几个简单的页面，没有从整体去思考，移动端该怎么布局，比如内容页面需要设置一个最大宽度max-width。</p>    <p>2.对自己写的代码要求过低，代码不够规范；工作中，也有负责过一个简单H5项目，没有涉及到什么动画及点线组合，现在想想当时自己写的应该也是有适配性问题，惭愧 ( # ▽ # ) 。</p>    <p>3.多去学习，实践；响应式布局，我还只会用这个方法的rem布局，不会淘宝的做法（ <strong>lib-flexible</strong> ），hammer.js这个好像还有更好的替代者（ <strong>AlloyFinger</strong> ），我暂时都没用过 (┬＿┬) 。</p>    <p>4.再想想，也不是想要自己学太多；希望自己能理解自己用到的，然后把代码写好 (◕ˇ∀ˇ◕) 。</p>    <p>最后：</p>    <p>我的这个H5项目可以在这里看： <a href="/misc/goto?guid=4959725722811795422" rel="nofollow,noindex">线上效果</a> 。</p>    <p>代码在： <a href="/misc/goto?guid=4959725722903829328" rel="nofollow,noindex">源代码</a> （这个弄得有点尴尬⊙﹏⊙‖∣）</p>    <p> </p>    <p>来自：http://www.cnblogs.com/wj204/p/6078776.html</p>    <p> </p>