Difference Between Width and Device-Width in CSS Media Queries

Difference between width and device-width in CSS media queries

device-width is the...

width of the output device (meaning the entire screen or page, rather than just the rendering area, such as the document window).

Source.

The width...

describes the width of the rendering surface of the output device (such as the width of the document window, or the width of the page box on a printer)

Source.

What is the difference between max-device-width and max-width for mobile web?

max-width is the width of the target display area, e.g. the browser

max-device-width is the width of the device's entire rendering area, i.e. the actual device screen

Same goes for max-height and max-device-height naturally.

What is the difference between width and device-width in CSS?

The device-width and device-height features refer to the dimensions of the output device (that is, the screen size).
The width and height features, on the other hand, refer to the dimensions of the rendering surface, which is the viewport (for example, the browser window) for screen media, or the page box for print media.

http://reference.sitepoint.com/css/mediaqueries#mediaqueries__tbl_media-queries_media-features

CSS media queries min-width and min-device-width conflicting?

Device-width refers to the display's resolution (eg. the 1024 from 1024x768), while width refers to the width of the browser itself (which will be different from the resolution if the browser isn't maximized). If your resolution is large enough to get you in one break point, but the width of the browser is small enough to get you in another one, you'll end up with an odd combination of both.

Unless you have a legitimate reason to restrict the style sheets based on the resolution and not the size of the viewport, then just use min-width/max-width and avoid min-device-width/max-device-width.

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.

What's the difference between the media queries max-width and max-device-width?

check this post. http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html

What is the difference between these two media queries?

Assuming you're not asking about the difference between the media features width vs device-width, but rather the difference between the two media queries themselves: it's useful to know that the comma in the query functions as a logical OR. Thus, the first query says,

“If it's a screen with a max-width of 767px OR if it's a screen with a max-device-width of 767px...”

versus the second query which only queries max-width. In queries with a comma, the first will be evaluated, then the second, etc. If any of these is true, then the enclosed CSS will be applied.

See http://www.w3.org/TR/css3-mediaqueries/#media0

As far as how width and device-width work, PPK's http://www.quirksmode.org/blog/archives/2010/09/combining_meta.html is still a very useful read as to why one might want to avoid using device-width in media queries, as well as a good explanation of the differences.

@Media min-width & max-width

I've found the best method is to write your default CSS for the older browsers, as older browsers (including IE 5.5, 6, 7 and 8) can't read @media. When I use @media, I use it like this:

<style type="text/css">
    /* default styles here for older browsers. 
       I tend to go for a 600px - 960px width max but using percentages
    */
    @media only screen and (min-width: 960px) {
        /* styles for browsers larger than 960px; */
    }
    @media only screen and (min-width: 1440px) {
        /* styles for browsers larger than 1440px; */
    }
    @media only screen and (min-width: 2000px) {
        /* for sumo sized (mac) screens */
    }
    @media only screen and (max-device-width: 480px) {
       /* styles for mobile browsers smaller than 480px; (iPhone) */
    }
    @media only screen and (device-width: 768px) {
       /* default iPad screens */
    }
    /* different techniques for iPad screening */
    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:portrait) {
      /* For portrait layouts only */
    }

    @media only screen and (min-device-width: 481px) and (max-device-width: 1024px) and (orientation:landscape) {
      /* For landscape layouts only */
    }
</style>

But you can do whatever you like with your @media. This is just an example of what I've found best for me when building styles for all browsers.

iPad CSS specifications.

Also! If you're looking for printability you can use @media print{}.

Media Queries - In between two widths

You need to switch your values:

/* No less than 400px, no greater than 900px */
@media (min-width:400px) and (max-width:900px) {
    .foo {
        display:none;
    }
}

Demo: http://jsfiddle.net/xf6gA/ (using background color, so it's easier to confirm)

Difference Between Width and Device-Width in CSS Media Queries