【笔记】h5活动页制作流程总结

在公司制作的活动页通常包括各种测评活动，宣传单页，报名，信息收集等等，对接后端接口的需求较少，内容简单，难点主要在于自适应方案的选择和不同系统的兼容问题，下面大体梳理一下制作一个活动页需要考虑的几个方面。

1. 布局：
   通常活动页简单的用div区分不同的页面，再分情况展示即可，我的常用方法是，给每个页面一个<div class=“page”>，拿它当每一页的body，再在里面放一个<div class=“container”>作为页面的内容区域，page设置固定定位在0,0处，且默认visibility: hidden，通过给每页加current类名来修改可见性（用visibility而不是display，因为用display的话所需要的数据不会加载，影响体验（它不在文档流里），而visibility标签，数据可以提前加载好，不会切换页面才加载图片，此外，不用透明度是因为透明度的div也会触发事件，切换到新的页面了，我们肯定不会希望上一个页面还在影响事件触发）。container就按照平时在body内正常布局即可。这里注意一点，拿到的psd设计稿里面可能设计师会给加两根水平，两根垂直的辅助线，这个线就是定义的每一页的内容区域，即container的位置和大小，而后面的背景图，其实是page的背景，这里要注意下，有时候属于“潜规则”，产品或者设计不会直接告诉你，但自己要懂。

2. 自适应：

   2.1 rem方案

   因为h5不识别rpx，所以要用rem来做自适应，并用js根据设备宽度调整根元素的font-size，举个例子，一般设计稿都是750像素宽，比如里面有个按钮是100像素宽，50像素高，为了方便计算，定义1rem=100像素，即用js给html加上font-size=100px（设备宽750px时），那么按钮的宽是1rem，高是0.5rem，这样把在ps里量出来的像素，除以100后用rem作为单位即可。如果设备宽360px，那就要按比例修改html的font-size，360/750 = x/100，求出x就是正确的font-size，里面的rem还是该咋写咋写。

   2.2 viewpoint方案
   上面这种方法是可以的，但有个问题是比较麻烦，还要换算，因此可以使用viewpoint元标签来修改页面布局视口width为设计稿宽度，并设置禁止缩放，这样里面全部统一使用px作为单位即可，设置viewpoint的width后，初始的布局视口和视觉视口都是这个设定的值，刚好根设计图一样宽（如果设计图是750的话），如果使用这个方案，要记得给每个page写好宽度为750（设计稿宽度），不然在pc下，由于viewpoint失效，布局视口就不是固定的750了，内部div不设宽度的话，就会跟着浏览器可视区域宽度走。

   综上，viewpoint是较新，也较为简单的解决方案，只要记得给外部div设置好宽度即可，最好再加个居中方便pc查看。

3. 响应式：
   一般响应式都是pc的需求，毕竟移动端一般也不太会遇到频繁改浏览器尺寸的情况，如果需要页面整体也跟着缩放，那就js监控窗口变化事件并修改根元素字号+rem做单位即可，不要用px单位然后修改page宽度，因为这样移动端下可能会出滚动条（因为写死了布局视口），如果仅仅是页面布局的响应式，flex足矣应对了。

4. 常用库：
   一般活动页用不到框架，通常jQuery足以满足需求，此外主要用到animate和swiper这两个库比较多，且大部分需求这俩库都可以满足，诸如页面的切换特效可以用swiper来做，页面内的小动画可以用animate，如果是一些由设计稿指定的效果，则建议优先考虑css3来实现，而不是canvas（因为canvas制作起来相对复杂，而一个活动页通常只给几天到一周开发时间，还要预留出修改时间）。

5. 切图：
   切成750px宽度的就行，省的div还得写宽度再居中麻麻烦烦的，不过也看个人爱好了，毕竟切图也挺简单就不多扯了。

6. 测试：
   谷歌浏览器可以扫码到手机上测试，多试试ios和安卓的兼容，这个最重要，其次就是f12下调成各种大小试试自适应，测好再交，省的来回返工。