吐槽：随着现在越来越多人装B，特别是一些产品经理。现在也在换新的笔记本电脑，苹果的笔记本又是装B利器（特别是retina的pro）。最近就遇到一个同事的项目，还是像平常一样小心切图，认真对像素。一切测试都没有问题，顺利上线。但是，上线之后，产品经理跑过来说，有BUG。BUG描述： ...
吐槽：
随着现在越来越多人装B，特别是一些产品经理。
现在也在换新的笔记本电脑，苹果的笔记本又是装B利器（特别是retina的pro）。
最近就遇到一个同事的项目，还是像平常一样小心切图，认真对像素。
一切测试都没有问题，顺利上线。
但是，上线之后，产品经理跑过来说，有BUG。
BUG描述：（不认为是BUG）
前端页面上的图标是虚的。
环境：mackbook pro retina屏
现象：
给了一个截图
图标是虚的
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) { /* 这里放对应的图标兼容！ */}
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理：https://www.xlkjsw.com
原标题：如何在普清的屏上调试CSS样式二倍图背景
关键词：CSS
*特别声明：以上内容来自于网络收集，著作权属原作者所有，如有侵权，请联系我们：
admin#shaoqun.com
（#换成@）。
