Search code examples
cssresolutionretina-display

Retina Display Media Query apply on css

I have created a web application on normal 1440px. Now I have to convert as per specification ,to retina display 2880px. As I have devolved it already. What will easy and best practice of it ? I tried something like this 

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

but I came to know now that retina is something different. SO I tried https://css-tricks.com/snippets/css/retina-display-media-query/ this query but I didn't help so far .Maybe I am using it wrongly ?

Solution

  • It didn't help for you?

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

}