开发过微信公众号的人都知道,因为人使用手机屏幕大小不同的原因,微信公众号开发出来的页面要根据屏幕的大小来进行自适应,如果做的不好的话,非常影响微信公众号页面的美观性。今天我们就来了解一下微信公众号开发屏幕自适应的解决方案都有哪些?
1.百分比解决方案
百分比解决方案是一种快速解决微信公众号屏幕自适应的解决方案,这种方案实行起来非常的简单,但是对于图片的处理就显得比较难,因为微信公众号中页面中图片的宽度可以做的自适应,但是高度却不能够使用百分比来布局,因此在大多数的手机上,图片都是有可能变形的。
2.rem+px解决方案
在微信公众号开发的过程中,这种解决方案也是经常使用的一种解决微信公众号开发屏幕自适应的方式,通过媒体适配的方式给不同的手机宽度的屏幕定义不同的字体,然后使用再将微信公众号开发过程中的px单位换算成rem,这样就能够达到一种相对比较美观的微信公众号页面。在换算的过程中,因为rem是一个相对单位,是根据HTML根标签定义的文字像素来计算的,在14px的情况下,1rem就等于12px,字体大小定义不同,1rem代表的值也就不同。
3.使用一些前端框架
很多前端框架自身也都有属于自己的栅格系统,最为著名的就是bootstrap和mui。但是这两种框架在开发微信公众号的时候也都有自己的弊端,就是bootstrap在开发微信公众号的时候,一个标签中往往要定义很多个class,会增加很多的开发时间。而mui不仅虽然也有自己的栅格系统,相对于bootstrap来说能够简单一些,还能够给用户一个接近于原生app的体验效果,但是自身也有很多的问题有待解决。