CSS breakpoint on retina display using Bootstrap

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

CSS breakpoint on retina display using Bootstrap

Jan 26 '20 Comments: 1 Answers: 1

2

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

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

Current…

Open Full Question

Comments

[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!