DEV Community

CSS breakpoint on retina display using Bootstrap

Vicente G. Reyes on January 26, 2020

Anyone know how I can fix the media queries to make it look neat on retina screens? CS...

Read full post

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 • Jan 26 '20

Thanks!