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); | |
} | |
} |
This comment has been minimized.
This comment has been minimized.
that image could use some minification love tho (49.6% savings with imageoptim, for example) |
This comment has been minimized.
This comment has been minimized.
@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
This comment has been minimized.
Live result on http://hellyeah.is