H5开发小经验

H5开发初学心得

接触H5大概是从做一个简单的活动宣传页开始的，本以为就是写写HTML加点样式，真正动手才发现，H5的坑比想象中多得多，但也有很多"写出来了就能直接看到效果"的即时满足感。

布局是第一个拦路虎

以前写PC页面习惯了固定宽度，到了H5才发现，手机屏幕从4寸到7寸都有，分辨率还五花八门。最开始用px写死尺寸，结果换台手机就乱了。后来学会了rem+flex布局，配合viewport设置，页面终于能"自适应"了。再后来接触到vw/vh，发现响应式布局的路子又宽了不少。这个过程让我明白，H5开发的第一课不是写代码，是理解"屏幕是流动的"这件事。

交互比静态页面有意思太多

加上touch事件、滑动切换、点击展开之后，页面突然就"活"了。第一次用transform+transition做出卡片翻转动画的时候，那种成就感比写后端接口强多了。不过动画也有坑——一开始乱用margin做位移，页面卡得像PPT，后来才知道该用transform和opacity，浏览器渲染效率完全不一样。

兼容性是永远的痛

满心欢喜写完一个页面，在自己手机上跑得好好的，测试同事一打开——某品牌手机上按钮点了没反应，某旧版浏览器直接白屏。这时候才体会到caniuse.com的重要性，也学会了用autoprefixer自动补前缀、用babel转ES6。H5不是写完就完事了，得在各种真机上跑一遍才放心。

JS和CSS的边界越来越模糊

以前觉得JS管逻辑、CSS管样式，泾渭分明。后来发现用CSS变量配合JS动态换肤、用IntersectionObserver做滚动加载，两者配合起来才真正发挥H5的威力。最近还开始用localStorage做离线缓存，页面刷新数据不丢，体验一下子接近原生App了。

一句话总结：H5入门门槛低，写个页面出来不难，但要做到"各种手机都流畅、交互顺滑、加载快"，需要踩的坑还很多。多测真机、多看文档、善用开发者工具，慢慢就能从"能跑"进化到"跑得好"。