CSS Media queries not responding - html

Question

I know this question appeared here a few times, but I didn't find the answer I am looking for in them.
Basically I created web for 800x600 resolution, as I want to adjust web for different resolutions on desktop from this point. Before I go on, I want to ask, which is the best option, to use % or px for defining elements ?
So let's say I got web which I want to adjust to different resolutions. There is about 12 available of them for desktop. If I want that web to look properly on each, I should code it for each,right ? What is the best way to target screen resolution ? 800x600 works well, 1024x600 works too. However 1024x768, for some reason is not being targeted. Here I ll post the code:
.scene {
padding: 0;
margin: 0;
}
.fill {
position: absolute;
bottom: 0%;
right: -1%;
left: -2%;
top: -10%;
}
.expand-width {
width: 101%;
}
#media only screen and (min-width: 1024px) and (max-height: 600px){}
#media only screen and (min-width: 1024px) and (min-height: 601px){
body{background-color: red;}
.fill {
position: absolute;
bottom: 0%;
right: -1%;
left: -2%;
top: -10%;
}
.expand-width {
width: 101%;
}
}

Answer 1

Firstly you are using media queries so % or px is not an issue as media queries is ther for resolving that issue only. but for true responsive ness you can go for %.
Next you are designing for 1024*600, so 1024*768 is included in it that's why ir is not effecting the code.
Try !important for 1024*768 resolution styles.