Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

media query pixel-density and max-width together

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 */
like image 414
John Avatar asked Apr 16 '13 06:04

John


People also ask

Can you combine the minimum and maximum screen widths in a single media query?

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.

Can we use multiple expressions in a media query?

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.

Should I use max width or min-width in media queries?

Generally if you are starting small screen first use min-width and then build on top with media queries targeting larger resolutions.

How do you add max width and maximum height in media query?

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.


1 Answers

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 */ }
like image 132
Akshaya Raghuvanshi Avatar answered Sep 30 '22 11:09

Akshaya Raghuvanshi