Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
iPhone 6 Plus & iPad Air 2 media query (Retina HD displays). Also works for similar Android devices.
/* iPhone 6 Plus & iPad Air 2 media query (Retina HD displays).
Also works for similar Android devices. */
/* Use x2 images by default. */
.logo {
background-image: url(http://hellyeah.is/images/text-logo-ns@x2.png);
height: 300px;
width: 100%;
background-size: contain;
background-repeat: no-repeat;
background-position: center;
}
/* Use x3 images for iPhone 6 plus and similar devices */
@media only screen and (-webkit-min-device-pixel-ratio: 3),
only screen and (min-resolution: 3dppx), /* Default way */
only screen and (min-resolution: 350dpi) /* dppx fallback */ {
.logo {
background-image: url(http://hellyeah.is/images/text-logo-ns@x3.png);
}
}
@paulmillr

This comment has been minimized.

Copy link
Owner Author

@paulmillr paulmillr commented Oct 10, 2014

Live result on http://hellyeah.is

@stryju

This comment has been minimized.

Copy link

@stryju stryju commented Oct 10, 2014

that image could use some minification love tho (49.6% savings with imageoptim, for example)

@paulmillr

This comment has been minimized.

Copy link
Owner Author

@paulmillr paulmillr commented Oct 14, 2014

@stryju unfortunately, even though it says it's a lossless compression, it lost some colors due to conversion.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment