视网膜显示媒体查询适用于 css

Question

我在正常的 1440 像素上创建了一个 Web 应用程序。现在我必须按照规范转换为视网膜显示 2880 像素。因为我已经下放了它。什么会容易和最佳实践呢？我试过这样的事情

@media only screen and (min-width : 2800px){
body.checkout-cart-index  input#s_method_flatrate {
    width: 22px;
    height: 12px;
}
}

但我现在才知道视网膜是不同的东西。所以我尝试了https://css-tricks.com/snippets/css/retina-display-media-query/这个查询，但到目前为止我没有帮助。也许我用错了？

Answer 1

对你没有帮助？

@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (   min--moz-device-pixel-ratio: 2),
only screen and (     -o-min-device-pixel-ratio: 2/1),
only screen and (        min-device-pixel-ratio: 2),
only screen and (                min-resolution: 192dpi),
only screen and (                min-resolution: 2dppx) { 

  /* Retina-specific stuff here */

}