微信小程序全屏背景图适配(Full screen background map adaptation of wechat applet)

需求:一张全屏背景图适配不同手机屏幕,图片不变形不裁剪

方案:填充色+图片。其他方案不太行。其他方案参考微信社区:https://developers.weixin.qq.com/community/develop/doc/000eee514f8908ed7d5aef55e51400

  • #EF1739是填充色,背景图片大小按照设计图写死,布局从上往下,区中。如果屏幕比图片宽或者长,则填充#EF1739。
  • 别问,问就是这是最好最简单的解决方案了。里面的内容用绝对定位布局,这还顺便解决了在不同机型中内容和全屏背景图位置错位不适配问题。
  • 嗯,又是和产品吵架的一天
css代码:
background: #EF1739 url('') center top no-repeat;
background-size: 750rpx 1207rpx;
————————

Requirements: a full screen background image is suitable for different mobile phone screens, and the image is not deformed or cut

Scheme: fill color + picture. Other options are not very good. Other schemes refer to wechat community: https://developers.weixin.qq.com/community/develop/doc/000eee514f8908ed7d5aef55e51400

  • #Ef1739 is a fill color. The size of the background picture is written according to the design drawing. The layout is from top to bottom and in the area. If the screen is wider or longer than the picture, fill #ef1739.
  • Don’t ask, this is the best and simplest solution. The content inside is arranged with absolute positioning, which also solves the problem of dislocation and mismatch between the content and the full screen background image in different models.
  • Well, it’s another day of quarrelling with products
css代码:
background: #EF1739 url('') center top no-repeat;
background-size: 750rpx 1207rpx;