loading...

CSS breakpoint on retina display using Bootstrap

highcenburg profile image Vicente G. Reyes ・1 min read

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

I was wondering how to set the CSS media queries on retina display to make it the same as smaller laptop screens.

It currently looks like this on my mac with 1920 x 1080 screen

enter image description here

I would like it to be this way just like on a smaller screen

enter image description here

Current…

Discussion

markdown guide
 

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