H5 开发概述

1.H5 开发及其前世今生

「H5 开发」其实不太需要后端开发经验（有则为加分项），偏向界面还原制作、前端脚本逻辑的实现，同时与谷歌 2017 年提出的新岗位-动效设计师（Motion Designer (opens new window)）也有交集，要求具备动效设计以及开发的能力，一句话来概括就是「基于 HTML5、CSS3 等网页技术，负责可视化 UI 界面及动效的开发」。

一名合格的「H5 开发工程师」不仅需要会做「PC 端网页」、「移动端网页」，还需要会做各类强交互、多动效的「 HTML5 营销活动页面 (opens new window)」，甚至还要做动效及脚本逻辑复杂的「HTML5 小游戏 (opens new window)」。

2.H5 开发的能力模型

「基础页面开发」、「响应式页面开发」、「滑屏应用开发」以及「动画效果开发」是岗位的基础能力要求，「游戏开发」是高阶能力要求。

掌握「基础页面开发」，我们就能应付「PC 端网页」的开发；

掌握「响应式页面开发」，我们可以撸「移动端网页」；

掌握了「滑屏应用开发」以及「动画效果开发」，我们能开发各类强交互、多动效的「 HTML5 营销活动页面 (opens new window)」；

掌握了「H5 游戏开发」，我们才能做动效及脚本逻辑复杂的「HTML5 小游戏 (opens new window)」。

具备基础能力要求的同学，只能说拿到了岗位应聘的敲门砖，能否进到门内，要看有没有具备高阶能力的同学与你竞争；而兼具基础能力和高阶能力的同学，应聘的时候已然是半条腿迈进了门。另外半条腿，则取决于通用能力方面（如沟通能力、稳定性等）的评估，以及薪资要求是否与职级评定相匹配等非技术方面的因素。

需要提一下的是，上面并没有把「性能优化」考虑进去，因为「性能优化」是每一个开发岗位所必需的通用意识和能力，并非「H5 开发」所特定的要求。

3.rem

;(function(){
  var html = document.documentElement, // 储存 html
​  // 横屏还是竖屏
​  resizeEvent = 'orientationchange' in window ? 'orientationchange' : 'resize',
  dW = 750; // 设计稿宽
  function remCalc(){
​    var clientW = html.clientWidth; // 视口宽
​    if(!clientW) return;
​    if(clientW > dW){
​      // 如果视口宽大于 dW 设计稿宽 就等于 100px 字体
​      html.style.width = dW + 'px';
​      html.style.fontSize = '100px';
​      html.style.margin = '0 auto';
​    }else{
​      // 否则，当前视口 / 设计稿宽 * 100 字体大小
​      html.style.fontSize = clientW / dW * 100 + 'px';
​    }
  }
  if(!html.addEventListener) return;// 是否支持 addEventListener 方法
  // 绑定视口变化事件
  window.addEventListener(resizeEvent,remCalc,false);
  // DOMContentLoaded ---> 类似 window.onload ,但是只需要加载完成页面文档后就可以调用
  document.addEventListener('DOMContentLoaded',remCalc,false);
})()