How Would You Write Media Queries for Multiple Screen Sizes

CSS Media queries for 2 different ranges

Demo

Or

Comma separate.

@media 
  only screen and (min-width: 960px) and (max-width: 1400px),
  (max-width: 768px) {...
}

Technically these are treated like to separate media queries, but that is effectively or.

Multiple media queries for different sizes not working

First of all your HTML needs to have the viewport set in the <head> section.

Next - you are applying all of the first media query for screens with a maximum width of 1280px, so 1280px or smaller. Use @media screen (max-width: 651px) and (min-width:1280px) instead.

For smaller screensizes your code seems correct.

Edit

The order only has an effect on display when several queries are applied to the same screen settings. It's common to start at the largest screen setting and work your way down to the smallest, that way you are only reflecting extra changes each time rather than including every change in every media query.

Multiple media queries for different screen sizes

you don't need to set a maxwidth on your media queries as the next media query overrides it anyway. Try this:

#gallery-1 img {
    width:375px;
}
@media screen and (min-width: 1366px) {
    #gallery-1 img {width:375px;}
}
@media screen and (min-width: 1440px) {
    #gallery-1 img {width:428px;}
}
@media screen and (min-width: 1600px) {
    #gallery-1 img {width:434px;}
}
@media screen and (min-width: 1920px) {
    #gallery-1 img {width:540px;}
}

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)

How to properly do multiple CSS media queries

The problem seems to be one of a simple error in your CSS.

There are a couple of 'comments' end media which start with a double slash. This is not correct CSS. If those (in this case in particular the first one) are removed then the second media query works.

It can be worth putting your code through a validator - in this case I used the W3C validator and it came up with the errors clearly showing the lines they occured on.

It's also worth lookiing in the browser dev tools to see exactly what CSS is being picked up and used on an element.

Incidentally, the code worked fine without the meta field that you mentioned (at least on Edge/Chrome Windows10).

Using @media queries for different screen-sizes not working properly

You have violated some indentation rules on the bottom block. Make sure to set correct indentation when nesting as you have done in top block.

What is the media query for large desktops?

The challenges of optimizing for large-scale displays center around how to scale and manage content.
You need to assume screen width at certain points.

Example: for class "container"

@media screen and (min-width: 1400px) {
  .container {
    width: 1370px;
  }
}
@media screen and (min-width: 1600px) {
  .container {
    width: 1570px;
  }
}
@media screen and (min-width: 1900px) {
  .container {
    width: 1870px;
  }
}

CSS Media Query for multiple resolutions

Bear in mind that a device such as an iPad can be used in both portrait and landscape orientations, so I would use the following media query:

@media only screen and (min-device-width: 768px) and (max-device-width: 1280px) {

    /* .touch class from Modernizr */
    .touch .element {color: #fff;}

}

Or if you'd like to keep the styles in their own document:

<link rel="stylesheet" media="only screen and (min-device-width: 768px) and (max-device-width:1024px)" href="css/tablet.css">

Note: You could generally detect tablets by combining media queries with a feature detection library like Modernizr.