Media queries for higher resolutions

Question

I am stucked with the resolution. I am writing CSS for the following resolutions.

a.      800x600
b.      1024x768
c.      1280x800 and 1280x1024
d.      1366x768
e.      1920x1080
f.      2560x1440

And my laptop resolution is 1366*768, I have done CSS queries till there, but the problem arising now is how I write CSS for 1920*1080 and 2560*1440

I am testing the resolutions by changing the inspect element of chrome.

I have tried to code for 1920*1080, but it is only working if I am removing the code of 1366*768, means at a time only one code is running.

Here is my code of CSS:

@media only screen and (max-device-width: 800px) and (max-device-height: 600px){
  .tab-menu
  {
      padding: 0px;
      width: 16.2%;
      margin-right: 1px !important;
  }
    .tab-menu a
    {
        font-size: 13px !important;
    }
    .main
    {
        width: 10%;
    }
    .other
    {
        width: 10%;
    }
    .sku
    {
        width: 10%;
    }
    .adjust-height
    {
        width: 100px;
    }
    .table
    {
        font-size: 13px;
    }
    .w-line
    {
        width : 9.2%;
    }
    .w-store
    {
        width: 9%;
    }
    .w-item{
        width: 13.3%;
    }
    .w-item-name{
        width:22.4%;
    }
    .w-qty
    {
        width: 10%;
    }
    .w-uom
    {
        width: 5%;
    }
    .w-price
    {
        width: 10%;
    }
    .w-total
    {
        width: 1.4%;
    }
    .w-blank
    {
        width: 2%;
    }



}





@media all and (-ms-high-contrast:none) and (max-device-width: 800px) and (max-device-height: 600px) {
    *::-ms-backdrop,.w-line {
        width: 9%;
    }
    *::-ms-backdrop,.w-qty {
        width: 9%;
    }
    *::-ms-backdrop,.w-price {
        width: 10%;
    }
}




@media only screen and (max-device-width: 1280px) and (max-device-height: 720px){
    .bottom-grid
    {
        height: 130px;
    }
    .adjust-height
    {
        width: 130px;
    }
    @-moz-document url-prefix() {
        .bottom-grid
        {
            height: 120px;
        }
    }
    *::-ms-backdrop,.bottom-grid {
        height: 121px;
    }
}


@media only screen and (max-device-width: 1280px) and (max-device-height: 768px){
    .adjust-height
    {
        width: 130px;
    }
}



@media only screen and (max-device-width: 1920px) and  (max-device-height: 1080px){
    body
    {
        overflow-x: hidden;
    }
    .adjust-height
    {
        width: 200px;
    }
    .bottom-grid
    {
        height: 490px;
    }
    .tab-menu
    {
        width: 13.9%;
    }
    .foot-close
    {
        padding-right: 170px;
    }
    .tab-menu-left
    {
        padding-left:70px;
        padding-right:65px;
    }
    .tab-menu-right
    {
        padding-left: 0px;
        padding-right: 170px;
    }
    @-moz-document url-prefix() {
        .bottom-grid
        {
            height: 480px;
        }
    }
    *::-ms-backdrop,.bottom-grid {
        height: 480px;
    }
}


@media only screen and (max-device-width: 1366px) and (max-device-height: 768px) {
    .adjust-height
    {
        width:137px;
        transition: all 0.5s;
    }
    .tab-menu
    {
        width: 13.8%;
        text-align: center;
        margin-right:5px;
    }
    .tab-menu-left
    {
        padding-left:5px;
    }
    .tab-menu-right
    {
        padding-right:67px;
    }
    .bottom-grid
    {
        height:179px;
        width:100%;
        background-color: white;
        overflow-y: scroll;
        margin-left: 0px;
        margin-right: 0px;
        padding-left: 0px;
        padding-right: 0px !important;
    }
    .w-img
    {
        width: 5%;
    }
    .w-line
    {
        width: 7.2%;
    }
    .w-store
    {
        width: 10.4%;
    }
    .w-item
    {
        width: 14.3%;
    }
    .w-item-name
    {
        width: 24.4%;
    }
    .w-qty
    {
        width: 10.2%;
    }
    .w-uom
    {
        width: 6%;
    }
    .w-price
    {
        width: 7.8%;
    }
    .w-total
    {
        width:7.6%;
    }

    @-moz-document url-prefix() {
        .bottom-grid {
            height:167px;
        }
        .w-qty
        {
            width: 10.9%;
        }
    }

    @media all and (-ms-high-contrast:none)
    {

        *::-ms-backdrop,
        .bottom-grid {
            height: 165px;
            margin-bottom: 0px;
        } /* IE11 */
        *::-ms-backdrop,.main-footer
        {
        }*::-ms-backdrop,.blue-band
         {
             font-size: 14px;
         }
        *::-ms-backdrop,.form-control
        {
            padding: 3px 6px;
        }
        *::-ms-backdrop,.select2-selection__arrow b
        {
            top:25% !important;
        }
    }
}

Thanks in advance...

Answer 1

When using 2 or more media queries, their order in the CSS matters.

Here is a "bigger first" solution, where body starts gray and change when screen gets smaller

Fiddle demo

body {
  background: gray;
}

@media only screen and (max-width: 1000px) {
  body {
    background: red;
  }
}
@media only screen and (max-width: 800px) {
  body {
    background: blue;
  }
}
@media only screen and (max-width: 600px) {
  body {
    background: green;
  }
}

Here is a "smaller first" solution, where body starts gray and change when screen gets bigger

Note, here is the order of the queries switched compared with above max-width rules

Fiddle demo

body {
  background: gray;
}

@media only screen and (min-width: 600px) {
  body {
    background: green;
  }
}
@media only screen and (min-width: 800px) {
  body {
    background: blue;
  }
}
@media only screen and (min-width: 1000px) {
  body {
    background: red;
  }
}