一次h5活动页面的踩坑 过程

托好奇心的福，这几天又接了一个bug，哦不，一个非常锻炼个人能力的h5页面，期间涉及到很多问题，在此打算先占个坑，等日后有时间再慢慢记录，无论是swiper插件的使用，还是关于硬件加速的运用，又或者是flex布局的骚用法，我想都值得一记。

今天都7月五号了，最近活是真的重。现在为止对一个页面的记忆尤为深刻就是下图这个。需求是点击下方切换图书的按钮，小孩不动，书动，当然了，无非就是书小孩手三图分三层，然后定位，实现一个轮播效果。然而坑爹的是，当滑动到当前页面的时候，那个书和手会出现闪动的一个动作。就是手先是在书下方，而后闪动之后才会按照zindex定位的层级浮到书上方。这是个什么问题？ GPU渲染原理还是某种神奇的黑科技，当时我是彻底懵逼了。（20180705 欲知后事如何，且听下回分解）

接上，我首先就是百度了（别提google，没有好的FQ工具），然后原理什么的没人说，倒是找到了解决办法，就是给这几个元素，以及包裹他的元素使用了硬件加速，translate3d，用了之后你别说，还真好使，可是到现在为止，我仍不清楚具体原理！

唯一可以解释，牵强附会一点就是硬件加速时gpu会单独把使用了硬件加速的元素绘制成一个layout，这样就不再和原来文档流中的元素在同一个层了，从而单独渲染出来，因而不会闪动？（注意博主这个问号的用法，此处完全是个人猜想，正确性几乎为0。7/11更新）。

然后想说一下是关于flex的用法，这个项目布局的难点之一，在于上图中出现的这个边框，他是由曲线围成的，要命的是还加了一个logo，这种东西一旦出现，如果是个小尺寸的，那么直接使用px，使用固定布局，在移动端设备中会有一个比较好的体验。可是这个项目的要求之一便是 各个页面滚动切换，并且每个页面占一屏的大小，并且那个曲线边框，是统一的背景。

不同屏幕尺寸下，要达到一个看得过去的视觉效果，我首先想到的是我比较常用的rem布局，其核心点是使用屏幕宽度与某一数值的比例，使其计算出来一个字体大小并设置为根元素的fontsize，这个字体大小，以ip6 ，dpr 为2，屏幕宽度为375举例，要使得设计图上1px转为rem之后，实际渲染出来的大小为0.5px。

移动端设备实在五花八门，尺寸类型，更是数不清，要展开讲移动端适配，恐怕是讲不完了。所以这里只是稍稍一提。但同时，在做完这个项目之后我深刻的感觉到移动端要达到百分百完美的效果（这个百分百完美是指在不同尺寸的屏幕下达到相同的视觉效果），根本不可能！道理很简单，把设计图想象成一张图片即可，这个图片在不同尺寸设备下的显示可以想象为是沿对角线等比例缩放这个图片，那么问题来了，如果，另外一台设备的宽高比与设计图的初始宽高比相等，那么是可以达到一个较为完美的适配的，然而，现实中根本不可能。

特别像我基于rem的布局，基本上核心的依赖点是屏幕的宽度，假如碰上宽高比比原始设计图的宽高比大的手机的话，显示效果就很悲剧了。块和块之间的距离特别不好控制，好在有flex救了我的狗命，因为整个项目中，页面，基本上就是上下，或者上中下布局，所以直接用flex布局搞定了，块之间的间距由flex自动调整，然后用padding界定一下上下边界就好了，万幸最后用这种方式在没使用媒体查询的情况下完成了移动端的适配。

最后一点想说的是弹性布局之后，如果输入框恰好是flex item元素的话，在移动端输入的时候会非常悲剧，键盘弹起的那一刻，就是绝望的开始。

终（20180713）