视觉传播类专题的使用绝对定位的兼容性问题
- 此类专题我们需要使用绝对定位设置元素坐标，通过改变位移、缩放、透明度等来实现动画效果。 在使用相对定位（position:relative或absolute）设置动画元素的坐标时直接使用rem来定位，其结果是对不同屏幕比例的终端来说显示效果差异较大。 有一点原则：
-
如非必要尽量少使用absolute。
解决文案是：
动画元素设置固定的宽高，使用margin-top:-height/2;margin-left:-width/2设置其定位参照点为该动画元素的中心点
通过百分比设置动画元素的left或right和top或bottom,`注意这里的left\right\top\bottom的计算标准是动画元素中心点的横竖坐标。
使用这种方式，在不同屏幕高度的终端中，各个动画元素之间的上下左右间距会自动调整，而不会在屏幕较长的设备上固定的挤在最上方，在较宽屏幕上固定挤在左方或右方。
<html>
<body>
<div id="animate"><!--100*80-->
<img src="images/img.jpg" /><!--图片实际尺寸200*160-->
</div>
</body>
<html>
html,body{ width:100%; height:100%;}
#animate{
width:10rem;
height:8rem;
position:absolute;
margin-left:-5rem;
margin-top:-5rem;
left:20%; /*设计稿中动画元素中心点横坐标除以总页面宽度后得到的百分比*/
top:30%; /*设计稿中动画元素中心点横坐标除以总页面高度后得到的百分比*/
}
#animate img{width:100%; height:100%}
遵循一些原则
- 如非必要，禁止使用gif动画！在必须使用的情况下，一定要动态加载需要显示的gif动画，同时动态删除隐藏的gif动画。
- 避免使用display:inline-block, 做横向或纵向流式布局，因为使用此属性元素间有默认间隙，要fix比较麻烦，而且在低版本andorid上可能会有问题
- 避免使用calc样式- 避免使用fixed样式
- 尽量优化图片素材和脚本的大小，注意移动端流量及网速问题
- 多图页面或者多模块要注意做延迟加载，特别是非第一屏需要展示的图片或调用的脚本，必须做延迟加载(滚动或者切屏时才触发加载)
- 图库一类的大图预览页面必须做预加载
- 若专题动画使用了大量的大图素材，必须做预加载条，先加载图片资源再进行动画脚本运行，避免动画脚本运行完才出现图片，对首次打开页面的用户根本看不到动画过程！削弱了传播效果！
- 翻页避免使用像pc端的按钮切换页面，而是使用滚动到底部，显示加载更多内容按钮，用户点击后实现增量加载。
