Now in this fast computing world, every user or customer deals with different screen resolution monitors. Because of this thing it is difficult to make a website according to every user to provide him or her a good browsing experience on your website or any blog. It is also a big problem for various web designers also. If a user of resolution 1024x720 comes than we try to make website or arrange elements for him to give a good experience, on other hand if a user of higher resolution like 1920x1080 comes then it makes a big problem for user as well as designer. So CSS try to maintain this change by changing classes values. It doesn't requires any JavaScript, its pure CSS.
Now coming to the main point the element we are using here is @media screen. So first discuss about its conditions and properties
- @media screen and (max-width: 720px)
- @media screen and (min-width: 720px)
- @media screen and (max-height: 720px)
- @media screen and (min-height: 720px)
So it can be used both by using max and min conditions. But never try to use both at a time in your website, it will produce error and will not work properly at all. You can also use a combination of above conditions like
- @media screen and (max-width: 720px; max-height:420px;)
Syntax of @media screen
.class {background:#444; color:white; width:1280px; } @media screen and (max-width: 720px) { .class {background:#444; color:white; width:720px;} }
So in above code if width is less than 720px than class in @media screen will come into play while without @media screen class will be loaded if screen width is more than 720px.
