How to do media queries without affecting other media queries - css

Question

I am a bit confused here... I found some common breakpoints to use for my css media query but am only using max-width such as #media screen and (max-width: 812px) {} etc but it seems to be moving my other media queries around. I thought that this should only affect the code that is 812px or less. Do I need to add both a min-width and max-width to solve the issue ?
#media only screen and (max-width: 50em) and (orientation: portrait) {
label {
width: 100%;
display: block;
position: relative;
}
.nav {
width: 200%;
}
#nav-icon {
font-size: 28px;
line-height: 50px;
padding-left: 1em;
color: #ffffff;
background-color: #f44336;
}
div.nav ul, div.nav li, label{
line-height: 50px;
margin: 0;
padding: 0 2em;
list-style: none;
text-decoration: none;
color: #000;
font-weight: 100;
width: 150%;
position: relative;
font-size: .9em;
}
div.header2_welcome h1{
text-align: center;
font-family: 'Pacifico', cursive;
font-size: 1em;
position: absolute;
top: 5em;
left: 0em !important;
text-decoration: none;
white-space: nowrap;
}
img.pc101 {
width: 20em;
height: 7em;
-webkit-background-size: cover;
-moz-background-size: cover;
-o-background-size: cover;
background-size: cover;
position: absolute;
top: 27em;
margin-left: -15em;
font-size: .8em;
}
div.natural {
font-size: 150px;
position: relative;
right: .5em;
top: 2em;
animation: drop 2s ease forwards;
margin-bottom: 1em;
}
div.flat {
font-size: 150px;
position: relative;
left: 1200px;
bottom: 450px;
top: 8em;
}
div.treble_clef {
font-size: 100px;
position: relative;
right: 400px;
bottom: 400px;
}
div.crotchet_rest {
font-size: 6em;
position: relative;
left: 100px;
bottom: 800px;
}
div.crotchet {
font-size: 6em;
position: absolute;
left: 3.5em !important;
top: 3em;
animation: drop 2s ease forwards;
}
div.minim {
font-size: 6em;
position: absolute;
left: 1.5em;
top: 2em;
animation: drop 2s ease forwards;
}
}
This is only a sample of my code but don't know it is moving my other media queries around..

Answer 1

I think the following code will help you.
<style>
#media only screen and (max-width:768px) and (min-width:200px)
{
/* Your CSS Code */
}
</style>

Answer 2

The media query may have a lots of condition
only for screen of less than 500px
#media only screen and (max-width:500px)
only for screen between 200px and 500px
#media only screen and (min-width:200px) and (max-width:500px)
only for screen more than 500px
#media only screen and (min-width:500px)
only for screen on every size
#media only screen
only for print on every size
#media only print
only for sqare screen
#media (aspect-ratio: 1/1)
only for sqare screen
#media (aspect-ratio: 1/1)
only for screen of aspect ratio superior to : 16/9
#media (-max-aspect-ratio: 16/9)
ecc.. you can specify pixel-ratio or dpi to better fit your need