Media query for Different Screen size

By,
Santosh

Media query is new technique introduced in CSS3 for making the website ( or Application) responsive. Which will helpful to place our content in different screen size and arrange them as per the our view.

For certain screen size how our application should behave. These things we can manage by the media query. We can apply many breakpoint (Media query conditions) to manage our content properties like width, height, color, border-radius, border, background, etc using the tag name, class, or id.

It’s a very simple to understand and use with our application.

There are three way to apply Media query for screen size :-

1)      From High Screen size to developer given Screen size

Syntax :- @media screen and (min-width: 520px)
                {      Body……..                                                     }

Example :- @media screen and (min-width: 520px)
                            {                  ul li
                                                {
                                                            color: #DC2FF5;

font-size: 15px;
            font-style: bold;

list-style: none;

float:left;
   }

}

In the above example CSS will be applied screen size is 520px to above highest screen size pixel only. It will change ul li tag property that is color, font-size, list-style, float.

2)      From 0 (Zero) Screen size to developer given Screen size

Syntax :- @media screen and (max-width: 518px)
                {      Body……..                                                     }

Example :- @media screen and (max-width: 518px)
                            {                  ul li
                                                {
                                                            color: #facdc7;

font-size: 13px;
            font-style: italic;

list-style: none;

float: inherit;
   }

}

In the above example style will be applied screen size from 0px to 518px only. It will change ul li tag property that is color, font-size, list-style, float.

3)      From 0 (Zero) Screen size to developer given Screen size

Syntax :- @media screen and (min-width: 940px) and (max-width: 1460px)
                {      Body……..                                                     }

Example :- @media screen and (min-width: 940px) and (max-width: 1460px)
                            {                  ul li
                                                {
                                                            color: #23f556;

font-size: 10px;
            font-style: bold;

list-style: none;

float: left;
   }

}

In the above example style will be applied screen size is 940px to 1460px only. It will change ul li tag property that is color, font-size, list-style, float.

Application uses the @media rule(query) only if a certain condition is true then include a block of CSS properties will comes in picture.