CODEWITHSUNDEEP
htmlcssmedia-queries
Akorian
Akorian

Reputation: 85

Questions about media queries

I am relatively new to web development I already have built some websites and currently I am tackling a large project. I am creating a website for my MC-Server.

For that, I am working with media queries to ensure that the website looks good on all sorts of devices.

BUT: I figured out, that there are two major kinds of media-query.

Examples for what I mean:

@media screen and (min-width: 1921px) {...} 
@media (-webkit-min-device-pixel-ratio: 1.25) {...}

(I know that this isn't a standard yet)

I am having trouble using these. On 1080p monitors with 1.75, I need e.g. another positioning than on 1440p 1.75 monitors, etc.

Question #1: can I combine two media queries? E.g. the display must be 1080p AND 1.75 scale to use this query.

Question #2: what is the order in which the queries are processed? Resolution or scale first?

Upvotes: 3

Views: 214

Answers (3)

Bryce Howitson
Bryce Howitson

Reputation: 7690

You're already using a boolean in your first example.

@media and (condition) and (condition) not (!condition) { ... }

The comma others have mentioned relates to an OR. It works the same way as stacking a bunch of classes:

.myclass1, myclass2, div, p {
  color: red;
}

This means that ANY of the above would match and the text inside them would be red.

If you want to override or force precedence you simply put another declaration later:

@media only screen and (max-width: 1000px) {
  p{
    color: red;
  }
}

@media only screen and (max-width: 500px) {
  p{
    color: blue;
  }
}

In that instance, Paragraph tags would be blue until the rendered width is larger than 500px and then turn red up to 1000px wide. The reason that the <p> isn't always red is that the second rule overrides the previous one based on the order it was written.

For 99% of the responsive cases, you won't need to worry about any rules other than width and possibly ppi. However, I should note that a Media query is the exact same structure as @supports and can be used to target browsers like IE that are misbehaving. In those cases, you would test against some very specific attributes.

Example: This would target IE 10 +

@media all and (-ms-high-contrast: none),(-ms-high-contrast: active) {...}

Upvotes: 2

Sam
Sam

Reputation: 761

You can use the following operators for media queries:

  1. , is interpreted as the delimiter in a list of single media queries which are ORed. So each media query between the commas is first evaluated, then they are ORed together. This gives the comma / OR the lowest precedence.
  2. not always applies to a whole media query, without extending over a comma. This gives NOT the second lowest precendence after the comma / OR.
  3. not and only are mutually exclusive and have the same precedence.
  4. and has the highest precedence
  5. () parentheses are only used around media features and their values, i.e. (color) or (min-width: 320px). They may NOT be used to change precedence by grouping expressions.

Source1

Source2

Upvotes: 3

rantao
rantao

Reputation: 1802

You can combine media queries with a comma, like so:

@media only screen and (orientation : landscape) , only screen and (min-device-width : 481px) and (orientation : portrait) {
    ...
}

In terms of precedence, styles that are declared later will be used, unless the styles inside the media query have different specificity levels, or a !important marker is used

Upvotes: 4

Related Questions