Css Media Queries: Max-Width or Max-Height

CSS media queries: max-width OR max-height

Use a comma to specify two (or more) different rules:

@media screen and (max-width: 995px), 
       screen and (max-height: 700px) {
  ...
}

From https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries

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. Thus, if any of the queries in a list is true, the entire media statement returns true. In other words, lists behave like a logical or operator.

CSS media queries: max-width And max-height

It's missing close and open parenthesis before and after the Logical Operator

@media (max-width: 995px) and (max-height: 700px) { ... }

How can I apply a Media Query to both Height and Width?

@media (min-height: 768px) and (max-height: 768px) and (min-width: 1366px) and (max-width: 1366px) { ... }

Here is the possible duplicate question:

Media Queries: check min-height and min-width?

Here are a few references from the question :

First reference

Second reference

Multiple media-queries: max-width or max-height

it will use ALL of them as soon as the condition matches. so the rule used for .center would be the last one being defined (as usual in css, later definitions override the early ones)

But as I understand what you want to do with your query, wouldn't it be more like

@media only screen and (min-width:460px) and (max-height:400px){
.center{width:250px;}
}

CSS media multiple queries doesn't work when the statements are overarching

Regarding the problem with the width, your basic problem is this line:

@media screen and (min-width: 961px), screen and (max-width: 1101px)

When you use a comma in a media rule, it operates as a logical OR. So this rule will be applied if the width is greater than 961 OR if it is less than 1101 -- which is true for all widths. Instead, you need a logical AND between these conditions, so that the rule only applies between these two widths:

@media screen and (min-width: 961px) and (max-width: 1101px)

My preferred way to arrange media queries is to follow the principle of mobile-first design, listing narrow viewport rules first, then add media queries for wider viewports in increasing order of width. That way, each media query just overrides whatever styles it needs to, at whatever width it needs to, and you don’t get tangled up with ANDs and ORs.

.navbar__container {
  width: 100%;                    /* narrow viewports */
}

@media (min-width: 961px) {
  .navbar__container {
    max-width: 80%;               /* medium viewports */
  }
}

@media (min-width: 1101px) {
  .navbar__container {
    max-width: 68%;               /* wide viewports */
  }
}

Should I use max-device-width or max-width?

TL;DR

If you're making a responsive website, use min-width/max-width in your media queries rather than min-device-width/max-device-width in order to target a wider range of screen sizes.

According to the 2018 Media Queries Level 4 specification draft, the device-width media feature is deprecated. It will be kept for backward compatibility, but should be avoided.

8. Appendix A: Deprecated Media Features
To query for the size of the viewport (or the page box on page media), the width, height and aspect-ratio media features should be used, rather than device-width, device-height and device-aspect-ratio, which refer to the physical size of the the device regardless of how much space is available for the document being laid out. The device-* media features are also sometimes used as a proxy to detect mobile devices. Instead, authors should use media features that better represent the aspect of the device that they are attempting to style against.

As a side note, remember to specify a viewport meta tag in the <head> section of your document:

<meta name="viewport" content="width=device-width, initial-scale=1">

Explanation

Due to all the different possible screen resolutions and pixel densities a given device can have, a pixel is not a pixel because there are several things to take into consideration (zoom, pixel density, screen resolution and size, device orientation, aspect ratio, etc..). In this case, a pixel is actually referred to as a "optical reference unit" rather than a physic hardware pixel.

Fortunately, you can specify a viewport meta tag in the <head> section of your document in order to control the width and scaling of the browser's viewport. If this tag has a content value of width=device-width, the screen's width will match the device independent pixels and will ensure that all the different devices should scale and behave consistently.

<meta name="viewport" content="width=device-width, initial-scale=1">

In terms of media queries, you will probably want to use max-width rather than max-device-width, since max-width will target the viewport (current browser window), whereas max-device-width will target the device's actual full screen size/resolution.

In other words, if you are using max-device-width, you will not see different media queries applied when resizing your desktop browser, because unlike max-width, only the device's actual full screen size is taken into consideration; not the current size of the browser window.

This makes a huge difference if you're trying to create an adaptive layout because the site won't be responsive when resizing the browser. In addition, if you're using max-device-width the media queries you're using to target devices with smaller screens will not apply to desktops even when resizing the browser window down to match said smaller screen size.

As of 2018, the latest media query specification draft has actually deprecated the device-width media feature, therefore it should be avoided.

In addition, this article on Google Developers highly discourages the usage of max-device-width:

Google Developers - Web Fundamentals - Responsive CSS media queries
It is also possible to create queries based on *-device-width; though this practice is strongly discouraged.
The difference is subtle but very important: min-width is based on the size of the browser window, whereas min-device-width is based on the size of the screen. Unfortunately some browsers, including the legacy Android browser may not report the device width properly and instead report the screen size in device pixels instead of the expected viewport width.
In addition, using *-device-width can prevent content from adapting on desktops or other devices that allow windows to be resized because the query is based on the actual device size, not the size of the browser window.

Css Media Queries: Max-Width or Max-Height