收藏
回答

请教关于小程序全屏背景图的尺寸问题?

请教关于小程序全屏背景图的尺寸问题?

大家都知道不同手机有不同的尺寸,那么在小程序全屏背景图设计时,大家一般是如何处理这个问题的?

或者大家有什么经验?

https://developers.weixin.qq.com/miniprogram/dev/component/image.html

比如下面小程序的启动页背景图,现在设计师问我,启动页背景图片尺寸是多少




参考帖子

如何图片要填充全屏的话,背景图片的尺寸应该设置为多少?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/000684e6a3c4e803c7e94448a56000


getSystemInfo里面三个高度问题请教?? - 微信开放社区 https://developers.weixin.qq.com/community/develop/doc/0000ec1a4dcbf863abfab2d1f51800


.page-lead
  z-index 100
  height 100%
  position absolute
  left 0
  right 0
  top 0
  bottom 0
  background #fff url('../../../../images/bg-lead.jpg') center bottom
  background-size 100% auto
  z-index 100

所以图片比例为750x1624,保证在iPhone X系列上没问题


最后一次编辑于  2020-10-07
回答关注问题邀请回答
收藏

3 个回答

  • 微喵网络
    微喵网络
    发表于移动端
    2020-10-07
    要做的完美的话就要分层 属于陪衬的背景图案做的尽量高,设置为页面背景图,宽度100%,background-size设置为cover,顶部对齐或者居中,确保不同尺寸的手机都有铺满的效果 图片上需要用户看到的主体内容,包括文字、按钮再单独放一层,使用相对屏幕的定位,比如顶部的文字就相对顶部定位,底部的按钮相对底部定位,这样可以确保不同尺寸的手机都能完全看到这些主体内容
    2020-10-07
    有用 1
    回复
  • 皮卡云℡¹⁸⁶⁷⁶³⁶⁹⁵⁷²
    皮卡云℡¹⁸⁶⁷⁶³⁶⁹⁵⁷²
    发表于小程序端
    2020-10-07
    获取手机信息,动态设置图片大小?
    2020-10-07
    有用 1
    回复
  • 小肥羊🍊
    小肥羊🍊
    2020-10-07

    2020-10-07
    有用
    回复
登录 后发表内容
问题标签