Media Queries (max-width , min-width) responsive Desiging

[khurram123]

Hi, How ru guys.why we need to give max and min width both in media queries. I use only max-width and it works fine for me.
Is there any specific reason for using the max-width and min-width at same time.
Do i need to use both when i define media query for responsive Desiging .

[samuelmac]

Hi Khurram123, using both min and max width just gives you extra control over your CSS, but as you already know, you can use only 1 or both.

The code example below demonstrates:

@media only screen and (min-width:960px){
    /* styles for browser windows larger than 960px; */
}
@media only screen and (max-device-width:480px){
    /* styles for browsers and device widths smaller than 480px (usually mobile e.g. iPhone); */
}
@media only screen and (min-device-width: 481px) and (max-device-width: 1024px){
    /* styles for browsers and device widths bigger than 480px but smaller than 1025px */
}