Discussion on: CSS breakpoint on retina display using Bootstrap

[Tuna Çağlar Gümüş]

Hello,
For including high-res graphics, but only for screens that can make use of them. For retina you can use -webkit-min-device-pixel-ratio.

@media 
(-webkit-min-device-pixel-ratio: 2), 
(min-resolution: 192dpi) { 
    /* Retina-specific stuff here */
}

Or other highish-res:

/* 1.25 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.25), 
(min-resolution: 120dpi){ 
    /* Retina-specific stuff here */
}

/* 1.3 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.3), 
(min-resolution: 124.8dpi){ 
    /* Retina-specific stuff here */
}

/* 1.5 dpr */
@media 
(-webkit-min-device-pixel-ratio: 1.5), 
(min-resolution: 144dpi){ 
    /* Retina-specific stuff here */
}

[Vicente G. Reyes]

Thanks!