width-max : maximum width specified element itself, i.e. the element itself (the div) width should be less than or equal maximum width value.
min-width: predetermined minimum width of the element itself, i.e. the element itself, its width should be greater than or equal value.
Example: min-width: 1000px; it blocks larger than the actual value of the width region
About @media query (responsive design)
If the width of the document is less than 300 pixels modify the background color:
@media screen and (max-width: 300px) {
body {
background:pink;
}
}