一个移动端 H5 项目总结

两个月前做过几个移动端的 H5 页面，一些看似简单的东西一旦动手做起来总是会出现许多各式各样的问题，所以把这些问题记录下来，自己没事翻一翻，而且没准以后别人也遇到类似的问题，就可以供别人做参考，或者有个思路去解决。

position: fixed 定位失效

需求里要求把导航栏固定在顶部，这个也很简单，当然就是一个position: fiexed 的事，然而到 Chrome 上调成手机模式一看，emm , 手指一滑导航栏也跟着走了，可能很多程序员都有过这样的错觉，写代码写的美滋滋，一到浏览器一看，理想与现实的差距啊！出现这种情况，那说明 position: fiexed 没起到作用，首先检查了下是不是这行代码拼写出了问题，发现没有问题；接着进入浏览器控制台用光标指向了这个元素，查看它对应的 css 样式，发现并没有出现 position: fiexed ; 于是，去 google 了一下，看了许多关于这个问题的解释，发现这么一句话：父级元素如果有transform属性，会导致子元素的fixed失效。解决是父元素去掉 transform 属性或者父元素加 display：inline; 按照这个去修改了相应的代码，发现**还是没效果！！！**好吧，最后，把那一个模块的代码全删了重新写，并且按上面说的确保父元素没有 transform 之类的属性，终于有了导航栏固定顶部的效果。

几点启示：

1. 写代码要细心在细心，注意规范&