How web pages can be made responsive using media queries ? Illustrate with an example.

Question

Suresh Chand · Accepted Answer

CSS Media Queries allow us to create responsive websites that look good on all screen sizes, from desktop to mobile. It uses the @media rule to include a block of CSS properties only if a certain condition is true. A media query consists of a media type and can contain one or more expressions, which resolve to either true or false. @media not|only mediatype and (expressions) { CSS-Code; } The result of the query is true if the specified media type matches the type of device the document is being displayed on and all expressions in the media query are true. When a media query is true, the corresponding style sheet or style rules are applied, following the normal cascading rules. Code Part:

Responsive Column Layout using Media Query

Column 1

Some text..

Column 2

Some text..

Column 3

Some text..

Column 4

Some text..

Preview:

How web pages can be made responsive using media queries ? Illustrate with an example.

Leave your Answer:

Hits Counter

Question

How web pages can be made responsive using media queries ? Illustrate with an example.

Leave your Answer: