I am trying to use multiple mq for responsive styling - css

Question

On my website I am trying to use media quieres to specify a mobile size, tablet size, and desktop size. Well, when I make edits to the tablet it applies those edits to the whole page instead of just when its sized to a tablet. What can I do to stop this and continue with the responsive design.
#media (min-width:320px) { /* smartphones, iPhone, portrait 480x320 phones */
nav{
width: 100%;
float: left;
text-align: center;
min-height: 50px;
}
nav > ul {
margin-top: 50px;
padding: 0;
display: none;
list-style: none;
}
nav > ul > li, nav > ul > li > a {
line-height: 20px;
display: list-item;
margin-left: 0;
font-size: 26px;
}
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #fff;
font-size: 40px;
cursor: pointer;
}
}
#media screen and (max-width: 768px) {
/* portrait tablets, portrait iPad, landscape e-readers, landscape 800x480 or 854x480 phones */
nav{
width: 100%;
float: left;
text-align: center;
}
nav > ul {
margin-top: 50px;
padding: 0;
display: none;
list-style: none;
}
nav > ul > li, nav > ul > li > a {
line-height: 0px;
display: list-item;
margin-left: 0;
}
.hamburger {
padding: 20px;
display: block;
float: left;
text-align: center;
color: #000;
font-size: 10px;
cursor: pointer;
}
}

Answer 1

You can follow this query sequentially. Hope that it would be help.
/* Large screen desktop */
#media (min-width: 1170px) and (max-width: 1365px){
}
/* Normal desktop :992px. */
#media (min-width: 992px) and (max-width: 1169px) {
}
/* Tablet desktop :768px. */
#media (min-width: 768px) and (max-width: 991px) {
}
/* small mobile :320px. */
#media (max-width: 767px) {
}
/* Large Mobile :480px. */
#media only screen and (min-width: 480px) and (max-width: 767px) {
}

Answer 2

To get responsive images you have a few options.
Designate by general size using scrset:
Small: Under 600 px aimed at mobile users
Medium: Between 600 px-900 px aimed at midsized computer and tablets
Large: Over 900 px aimed at desktop monitors.
Scrset can also be used to designate percentages of screen space. For example, if you want the image to cover the full width of the screen you would use 100%. Then the browser will adjust the image to 100% width for the screen size of the visitor, regardless of the device.
You can also use the tag and the auto option for the size parameters. Such as: <img> width=auto height=auto. This will use client information to size the image.
Thirdly, while not as widely accepted, you can use client_hints=true along with the auto size option to get responsive images. This feature is fully supported by Chrome, not yet by other popular browsers.