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?

Solution

You can use the following operators for media queries:

, 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.
not always applies to a whole media query, without extending over a comma. This gives NOT the second lowest precendence after the comma / OR.
not and only are mutually exclusive and have the same precedence.
and has the highest precedence
() 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