大家做手机网页的时候,是如何使背景图变清晰的?
程序员文章站
2022-06-05 15:16:01
...
我发现一个现象,如果我要一个区域,比如宽高都是200px,然后背景图也正好是200px的话,那么在手机上显示会模糊,安卓和苹果都模糊,只有当我的背景图是超过200px,比如300px,然后用background-size:contain的方法,背景图才会清晰,这是为什么呢?
回复内容:
我发现一个现象,如果我要一个区域,比如宽高都是200px,然后背景图也正好是200px的话,那么在手机上显示会模糊,安卓和苹果都模糊,只有当我的背景图是超过200px,比如300px,然后用background-size:contain的方法,背景图才会清晰,这是为什么呢?
建议看看这篇文章:
http://www.w3cplus.com/css/towards-retina-web.html
简单说,一个屏幕像素会显示4个css像素,比如iPhone 5s,device-pixel-ratio是2,屏幕宽是320px,但显示的网页是640px,所以要显示320px宽的图片就要做成640px宽才清晰。
可能是因为手机是高清屏,实际像素是2X
去网上查一下 网页对retina屏的适配