1. 任务
接了一个简单的静态页，效果如图所示（内容涉及到公司隐私，已马赛克）
效果图
起初UI提供的背景图片是这样的
背景图片
2. 踩坑
二话不说，拿过来就干，结果最后调适配的时候BBQ了。
手机屏幕偏长的机型，background-size:cover左右显示不全图片
BBQ1
BBQ2
手机屏幕偏宽的机型，
background-size:contain左右留有空白
BBQ3
BBQ4
但background-size:100% 100%，不同手机机型，背景图片会被拉伸变形。
3. 如何解决这个尴尬的问题呢？
- 先让设计提供一个完整的背景图，中间白色区域是研发用代码来实现；
- 在设置背景图片后，也设置背景颜色，这样对于机体较长的机型就不至于底端背景缺失一块；
- 这么一来就做到了
既不拉伸图片又可以完全展示~
background-image: url(...);
background-size: 100% auto;
background-repeat: no-repeat;
background-color: #1fb9ff;
设计又提供的背景图片
最优解
4. 温馨提示
最后提醒一下大家，由于UI团队不一定都懂静态页编码，所以她们提供的图片也是需要研发来推敲的，移动端开发最主要就是适配的问题。如果本文对你有所帮助，感谢点一颗小心心，您的支持是我继续创作的动力！
最后：写作不易，如要转裁，请标明转载出处。
网友评论