Course Content

Other Courses

Tribhuvan university > CSIT - 2074 Syllabus > Web Technology > Old Questions > 2076(new)

Web Technology - Old Questions

Syllabus Notes Old Questions Unit Wise Questions Question Bank

11. How web pages can be made responsive using media queries ? Illustrate with an example.[2+3]

5 marks | Asked in 2076(new)

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. 

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.wrapper {overflow: auto;}
.menuitem {
  border: 1px solid #d4d4d4;
  list-style-type: none;
  margin: 4px;
  padding: 2px;
}
@media screen and (min-width: 480px) {
  #leftsidebar {width: 200px; float: left;}
  #main {margin-left: 216px;}
}
</style>
</head>
<body>
<div class="wrapper">
  <div id="leftsidebar">
    <ul id="menulist">
      <li class="menuitem">Menu-item 1</li>
      <li class="menuitem">Menu-item 2</li>
      <li class="menuitem">Menu-item 3</li>
    </ul>
  </div>
  <div id="main">
    <p>This example shows a menu that will float to the left of the page if the viewport is 480 pixels wide or wider.
    If the viewport is less than 480 pixels, the menu will be on top of the content.</p>
  </div>
</div>
</body>
</html>