what is difference between max-width and min-width in media query in html css
@media (min-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
@media (max-width:320px) { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (max-width:480px) { /* smartphones, Android phones, landscape iPhone */ }
@media (max-width:600px) { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (max-width:801px) { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (max-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (max-width:1281px) { /* hi-res laptops and desktops */ }
2
Answers
@media (max-width: 1000px) {// code}
for example means that if the window width is equal to or less than (at maximum) 1000px then the code in the query will trigger.@media (min-width: 1000px) {// code}
means that if the window width is equal to or more than (at minimum) 1000px then the code in the query will trigger.–view width is atleast 801px.(There is no max limit but has a minimum limit of 801px)
means whatever views whose width is greater than or equal to 801px.
–view width is atmost 600px.
means whatever views whose width is lesser than or equal to 600px.(has a maximum limit of 600px.there is no minimum limit)