前几天一个做运营的朋友半夜给我发语音，语气里全是崩溃。她说老板让她三天内上线一个活动页面，她以为跟做PPT差不多，结果打开编辑器一看，满屏都是看不懂的词，什么视口、什么重绘、什么弹性布局。她问我，H5网页开发这事，是不是非得先啃完一本砖头厚的书才能动手。我当时就笑了，因为我自己当年也是这么想的，结果白白耽误了两个月。
其实对新手来说，H5网页开发最怕的不是技术难，而是一上来就被概念淹没。今天咱们不列书单，就用一种比较笨但管用的办法，把这门手艺里最核心的几个基础概念掰开揉碎讲清楚。我按新手踩坑的频次给它们排了个序，越靠前的越值得先花时间。
这份排序是怎么来的
先说评选标准，不然你没法判断我说得有没有道理。我回顾了自己带过的十几个新手，加上在技术社区里蹲了大概两年看到的上千条求助帖，筛选依据主要有三条。第一是出现频率，也就是新手在动手做第一个H5网页开发项目时，被哪个概念卡住的次数最多。第二是连锁反应，有些概念没搞懂，后面学什么都费劲，这种要往前排。第三是修正成本，如果一开始理解偏了，后面改起来特别费劲的，也得优先讲。说白了，就是看哪个坑最深、爬出来最费劲。
排在第一位的视口概念
视口这个词听着玄乎，其实你可以把它理解成手机屏幕上那个真正能看到内容的窗口。很多人做H5网页开发时，在电脑上预览得好好的，一放到手机上就发现字小得看不清，或者内容宽出一大截。问题就出在没跟浏览器说清楚这个窗口该怎么算。你只需要在页面头部加一行声明，告诉浏览器按设备的实际宽度来渲染，后面的布局才有意义。这个声明不写，后面调的样式基本白搭，所以它排第一没商量。
排在第二位的弹性布局
我以前一直用老办法算百分比来排版，调一个按钮位置能折腾一下午。后来才明白，H5网页开发里最省心的布局方式是弹性盒子。你只要给父容器定好方向和对齐方式，里面的元素自己会商量着分配空间。刚开始学的时候我总觉得它规则太多，记不住。后来想了个笨招，每次只改一个属性，看页面怎么变，改上十来次就熟了。说实话，这个方法也不是每次都灵，上周做一个卡片列表时还是被换行规则绕晕了，气得我当晚没睡好。
常见问题：学了弹性布局还需要学浮动布局吗？
建议了解即可，不必深究。早年很多页面靠浮动排版，现在新项目里基本用弹性布局和网格布局了。但你看老代码或者接手别人的项目时，能看懂浮动是怎么回事就行，别花太多精力。
排在第三位的响应式单位
单位这事，新手最容易随手写像素值，结果换个大屏手机，间距全乱了。H5网页开发里常见的做法是用相对单位，让尺寸跟着屏幕宽度走。原理不复杂，你把设计稿的宽度当成一个基准，用相对单位去换算就行。我头一回用的时候算错了一个除法，整个页面的间距比设计稿小了快一半，自己盯着看了十分钟才发现不对劲，当时那个尴尬劲儿就别提了。
排在第四位的重绘与回流
这俩词听着像内行黑话，其实说的是页面更新的两种成本。简单点说，你改一个元素的颜色，浏览器重新画一下就行，这是轻量操作。但你要是改它的宽高或者位置，浏览器得把周围元素重新排一遍，代价大得多。做H5网页开发时，动画尽量只动变换和透明度，少动尺寸和位置，页面会流畅不少。我早先给一个轮播图加了宽度动画，低端机上卡得跟幻灯片似的，后来换成位移就顺了。
排在第五位的触摸事件
电脑上用鼠标点，手机上是手指碰，这是两套不同的交互逻辑。H5网页开发里得专门处理触摸开始、移动、结束这几个阶段，做滑动删除或者拖拽排序时绕不开。刚开始我总习惯用鼠标事件去凑合，在电脑上测试一切正常，一到手机上就失灵，找了大半天原因。它排第五是因为新手入门阶段未必马上用到，但只要你开始做交互，它迟早得补上。
到底该先啃哪个
有人问我，这五个概念是不是得按顺序全学完才能动手。我的看法是，视口和弹性布局这两个可以先花两天吃透，剩下的三个边做边学就行。你想做个简单的宣传页，前两个够用了。想加个轮播，再去补重绘的知识。想加滑动操作，再回来看触摸事件。这种按需学习的方式比从头到尾啃书快得多，至少对我是这样。
说句实在话，我到现在也没把这些概念的所有细节都摸透，时不时还得翻文档。不过这不妨碍我做出能用的页面，也不妨碍你做出能用的页面。你要是已经动手试过了，不妨说说你被哪个概念卡得最久，我也挺好奇别人的坑是不是跟我撞了。