I'm trying to create a rule that includes/excludes based on both max-width and device-pixel-ratio. An example would be if I want the Kindle Fire @ 600px to be excluded, but the iPhone5 @640 (smaller real world screen) to be triggered.
Does the following make an AND or an OR rule? Assuming it makes an OR rule, how would I create a rule that performs an AND type function (must pass both 'device-pixel-ratio of 2' AND 'max-width 749px' checks to be triggered)
@media only screen and (min--moz-device-pixel-ratio: 2),
only screen and (-o-min-device-pixel-ratio: 2/1),
only screen and (-webkit-min-device-pixel-ratio: 2),
only screen and (min-device-pixel-ratio: 2),
only screen and (max-width: 749px){
}
EDIT BELOW:
Okay here is what I have so far - I'm guessing commas are OR and 'and' is obviously AND. Is this correct? I'm trying to make a more universal set of queries targeting more than just iPhones/iPads...
@media
only screen and (max-device-width : 721px) and (orientation : portrait) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (max-device-width : 721px) and (orientation : portrait) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 359px) {
/* All Portrait Phones */
}
@media
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (-webkit-min-device-pixel-ratio: 1.5),
only screen and (min-device-width : 360px) and (max-device-width : 999px) and (min-device-pixel-ratio: 1.5),
only screen and (max-width: 999px) {
/* Small tablets (assume vertical) and landscape phones */
}
/*note - Anything over 999 wide to render fully - desktop, landscape or large tablets */
Combining media query expressionsMax-width and min-width can be used together to target a specific range of screen sizes. @media only screen and (max-width: 600px) and (min-width: 400px) {...} The query above will trigger only for screens that are 600-400px wide.
Syntax. A media query is composed of an optional media type and any number of media feature expressions, which may optionally be combined in various ways using logical operators. Media queries are case-insensitive.
Generally if you are starting small screen first use min-width and then build on top with media queries targeting larger resolutions.
Use a comma to specify two (or more) different rules: @media screen and (max-width: 995px), screen and (max-height: 700px) { ... } Commas are used to combine multiple media queries into a single rule. Each query in a comma-separated list is treated separately from the others.
Use mediaqueries like this example for iPad with Retina display.
@media only screen
and (min-device-width : 768px)
and (max-device-width : 1024px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio: 2) { /* STYLES GO HERE */ }
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