如何在普清的屏上调试CSS样式二倍图背景

html-css047

如何在普清的屏上调试CSS样式二倍图背景,第1张

BUG修复要求：

对图标进行修正，使在retina屏上图标依旧是清晰的。

分析：

到这里，做过移动端页面的都知道，这是没有双倍图呀。

修复方法：

第一步，让设计师出对应图标的双倍图

第二步，使用css的media query适配retina屏。

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),

only screen and (-moz-min-device-pixel-ratio: 1.5),

only screen and (-o-min-device-pixel-ratio: 3/2),

only screen and (min-device-pixel-ratio: 1.5) {

/* 这里放对应的图标兼容！ */

}

第三步，对应图标样式添加，并在浏览器中察看效果。

上面三步完成，这个小的适配也算完成了。

二倍图转一倍图利用css样式以及放两倍图。有一张200x200像素的图片(CSS像素，也就是普通像素点或者说是标准像素点)，给图片设置一个CSS样式：img{width：200px。height：200px。