Media queries for higher resolutions - html

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;
}
}

Answer 2

to target one reslotion (ex: 1024x768 ) you can use this following code.
#media(min-width:768px) and (max-width:1024px) {
/* enter your css for the super design !!! */
}
Hope, it help you !