Menu
What is the best way to use media queries to both detect a retina display and also specify max-width?
I can detect retina using
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
}
How do I add it to the media queries? Do I write
@media
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and ( min--moz-device-pixel-ratio: 2),
only screen and ( -o-min-device-pixel-ratio: 2/1),
only screen and ( min-device-pixel-ratio: 2),
only screen and ( min-resolution: 192dpi),
only screen and ( min-resolution: 2dppx) {
@media screen and ( max-width: 2000px){
.holer{
background:url("[email protected]");
}
}
}
Or is there any better method for changing images for retina displays? ( adding media queries for screen size to media queries for retina display)
761
To accommodate high resolution/retina displays, you'll want to use an image that's 1280 pixels wide, which is what's referred to as “2x”. While the graphic will still display on the website at 640 pixels wide, you are doubling the pixel density by using an image that's double the size.
In my experience, 320px, 768px, and 1200px are the most commonly used; these three values should be sufficient for targeting smart phones, tablets/laptops, and desktops, respectively.
Media queries can be used to check many things, such as: width and height of the viewport. width and height of the device. orientation (is the tablet/phone in landscape or portrait mode?)
In the CSS, we want to add a (max-width: 600px) for the media query which tells the computer to target devices with a screen width of 600px and less. Inside the media query, we change the background styles for the body to background-color: #87ceeb; .
You'd probably cover all retina displays according to this article by CSS-tricks. I guess you already found that out. Another option is to use SVG's, but I wouldn't use them for background images. The SVG format is perfect for two dimensional shapes and icons, altough icon fonts render faster.
As for the question "how to add media queries for screen size to media queries for retina display", the code you posted should work fine. Another way would be to just add the second clause to the first ones, like so:
@media
only screen and (-webkit-min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( min--moz-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( -o-min-device-pixel-ratio: 2/1) and ( max-width: 2000px),
only screen and ( min-device-pixel-ratio: 2) and ( max-width: 2000px),
only screen and ( min-resolution: 192dpi) and ( max-width: 2000px),
only screen and ( min-resolution: 2dppx) and ( max-width: 2000px) {
.holer {
background:url("[email protected]");
}
}
If you're using SCSS, create a mixin as explained here. This would save you alot of time and drastically improves readability.
111
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
