skip to Main Content

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


  1. @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.

    Login or Signup to reply.
  2. @media (min-width:801px)
    

    –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.

    @media (max-width:600px) 
    

    –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)

    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search