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

Question

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

@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 */

}

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

Retina Display Media Query apply on css

css

resolution

retina-display