移动端 初体验

最近，有个H5宣传页的任务， 就是在手机上查看一个网站的推广活动。 记录下我遇到的几个问题：

（1） 移动端开发是什么， 需要什么框架吗

刚开始，也不清楚这些概念，就百度了这几个概念，发现移动端开发一般分为三类：移动端web app，移动端网页，Hybrid开发。 我这种h5宣传页，应该属于移动端网页吧。框架什么的就没查了。
移动和web开发区别：https://www.zhihu.com/question/20269059

（2） 移动端怎么布局

概念比较混乱，一心想兼容web端和移动端。 什么流式布局，百分比来控制页面。 和同事讨论了下，发现只是个宣传页，而且需求明确了是移动端展示的，主要设计稿也是移动端的，375px的。 所以事情就变简单了， 只要考虑移动端， 移动端麻烦的是不同手机屏幕不一样，找到方法，加入meta标签搞定。

 <meta name="viewport" content="user-scalable=no,width=device-width,initial-scale=1,maximum-scale=1">

（3） px， rem单位的选择

因为移动端手机屏幕大小不一样， 用px单位的话，布局就会有误差，字体大小都一样，小屏幕手机就太小了。 所以就用了rem。补习了一番资料，找到引入rem的方法。

  <script>
    /**
      * (1) 设计稿是375px
      * (2) font-size 基础是100px, 便于计算。
      */
    (function (doc, win) {
      var docEl = doc.documentElement,
        resizeEvt = 'orientationchange' in window ? 'orientationchange' : 'resize',
        recalc = function () {
          var clientWidth = docEl.clientWidth;
          if (!clientWidth) return;
          clientWidth = clientWidth > 420 ? 420 : clientWidth;
          docEl.style.fontSize = 100 * (clientWidth / 375) + 'px';
        };
      if (!doc.addEventListener) return;
      win.addEventListener(resizeEvt, recalc, false);
      doc.addEventListener('DOMContentLoaded', recalc, false);
    })(document, window);
  </script>

（4） 使用rem心得

一、 rem使用很简单，也很实用，设计稿的单位，只要除以100，就可以得到rem。这样在不同手机屏幕下，布局是一样的，字体大小合体，效果稳定。
二、 animation动画里面用rem效果不稳定， 因为animation是有逐帧动画，rem计算有误差，要用px。
三、 css3 画图形，画图标使用rem也不稳定，用px较好。（看场景）

分享下宣传页的效果图，地址后续补上。