欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  后端开发

大家做手机网页的时候,是如何使背景图变清晰的?

程序员文章站 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屏的适配