当我编写媒体查询时，我总是指定最小值和最大值，这样当设备处于特定大小时我不会覆盖背景图像的CSS，而只是加载我想要的那个。 / p>
所以：
@media (max-width: 767px) { background-image: url(''); }
@media (min-width: 768px) { background-image: url(''); }
而不是：
background-image: url('');
@media (min-width: 768px) { background-image: url(''); }
注意：我使用SCSS，因此上述嵌套语法有效。
然而，当谈到视网膜......
我如何做同样的模式？因此，而不是覆盖图像，如：
background-image: url('');
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(''); }
我想做更多的事情：
@media (-webkit-max-device-pixel-ratio: 2), (max-resolution: 2dppx) { background-image: url(''); }
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx) { background-image: url(''); }
但是我将最大值设置为什么？通常你只需要在你的最小值以下一个像素，以防止双断点问题。解决方案需要什么？ 1.9dppx和1.9比率？
更新：看起来您不需要像素一样做以防止分辨率出现双断点，而是按原样运行。