时间：2021-07-01 10:21:17 帮助过：14人阅读
我发现一个现象，如果我要一个区域，比如宽高都是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屏的适配