CSS breakpoint on retina display using Bootstrap

#css #help #beginners

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

Jan 26 '20 Comments: 1 Answers: 1

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

Top comments (2)

Tuna Çağlar Gümüş • Jan 26 '20 • Edited

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!

DEV Community

CSS breakpoint on retina display using Bootstrap

Top comments (2)

Read next

How to Minimize HTTP Requests for a Faster Website

Difference between var and let in Javascript

Insertion Sort in Java (With Intuition + Dry run + Code)

What Will You Choose?