我们知道微信公众号文章的排版布局是有诸多限制的,例如会过滤自定义js及内联外链样式,但可以通过开发者工具编辑部分的行内样式,估计是公众号后台的一点小bug吧。因为本身公众号后台是不开放代码编辑的。
下面来举例一点平时遇到的问题及解决方案。
1.编辑九宫格特效时有裂缝。
因为当把可视区域分成3*3时,是不能平均等分的,可能有的多0.5px有的少0.5px;
还有就是大尺寸的图片的缩放到这个范围内也是不能标准取整的,当有九宫格内有滑动的时候,滚动尾部会有裂缝出现;(特效背景:九宫格通过滑动每一块拼凑成宁一个九宫格图案)
解决办法:给九宫格里每一块加一个同图案的背景,因为和前景是同样的图,又只是0.5像素的差距根本看不出来有背景衬托,达到修复裂缝;
2.超过40k的png图片上传后会自动压缩添加一个白背景;
这样一些想利用png图覆盖的创意难以实现。可以将png切开布局,或内容压在png之上然后精准校对位置。
3.滚动区域上无法叠加其他层级
实验时上一块区域是一个滚动区域,下一区域是图片,想利用margin-top:-30vw 覆盖在其上,结果发现不管图片区块是在滚动区域前还是后层级都在滚动区域下面;如果利用 position: relative;z-index:10;改变层级, position: relative会被过滤。
解决办法:可以利用transform: translate(0,-30vw);覆盖其上。
4.当嵌入网络视频时无法修改视频的宽高尺寸
当你嵌入一段外部腾讯视频时,你会发现无法修改嵌入后的宽高尺寸,即使你传的竖屏比例的视频也只会在横屏的区域里播放,(中间一小条,两边补黑);
解决方案:可以将视频做成横屏比例但视频内容是竖屏的,然后利用transform: rotate(90deg) scale(1.2,1.2);旋转90度,达到竖屏播放效果和缩放视频尺寸的效果