CSS Media Queries Min-Width and Min-Device-Width Conflicting

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.

Media query min-width not considering devices below a certain width

No matter if you use the mobile-first or desktop-first approach, you need some styles that apply when none of the media queries apply. In your example, there are no styles which apply for widths below 375px. Most likely it would be okay if you simply take the CSS rules you have inside the first query (<375) out of that query and put it at the very beginning of the stylesheet.

Or said differenty: Just erase the @media (min-width: 375px) { at the beginning and its closing } bracket, then those styles will apply to all widths below 768px (also to those narrower than 375px)

How to use min-width and max-width in CSS media queries with high density mobile device screens

There is a difference between device pixels and CSS pixels. On many screens they are treated the same, but on high DPI screens there can be several device pixels per CSS pixel. See this page on MDN for more reading.

To control the width in CSS pixels, use the viewport meta tag in your HTML. This tag is generally only interpreted on mobile devices so it shouldn't affect your site on desktop browsers. It specifies the minimum width at which your site will be displayed.

For example, to set your site to display at a minimum width of 500px on mobile, use:

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

To display the site at the browser's width use:

<meta name="viewport" content="width=device-width">

In addition to the MDN article, the following article may be helpful for setting display widths for tablets.

How to fix css errors for min-device-width and max-device-width

No need to use "min-device-width"

@media only screen and (min-width: 375px) and (max-width: 667px) {
  body {
    font-size: 9.5pt;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}
@media only screen and (min-width: 1200px) {
  body {
    font-size: 10pt;
    margin: 0 4em;
  }
  div.content {
    width: 96ex;
    margin: 0;
  }
}

Conflict between styles.css and @media query.css

ranges that you have specified that they overlap each other,i change 959 to 1000 for better result.

@media only screen and (max-width:768px){    div a {background-color: blue;}}@media only screen and (min-width:769px) and (max-width:959px){    div a {background-color: pink;}} @media only screen and (min-width:959px) and (max-width:1000px){    div a {background-color: red;}}

 <div><a href="">goooood</a></div>

Trouble mixing min width and max width media queries?

I think why not? You specific the .navibar li a when max-width: 1300px is 2px, so form 0 to 1300px, they will have that value = 2px.

And since you write the rule of max-width: 1300px after the rule of max-width: 768px, so it always be 2px too even if you have less than 768px width. You should relocate the rule of max-width: 768px after the 1300 one and it will work just fine.

And a side note, try not use !important in your code, it a bad practice. Find other way(s) to override the rule(s), !important should only use to override inline style, which is a bad practice too if you write style like that.

@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{}.

CSS Media Queries Min-Width and Min-Device-Width Conflicting