• RWD-Responsive Web Design.
  • It is used to make your web page look good, appropriate and well placed on all devices like desktops, tablet, smartphones, etc.
  • It uses HTML and CSS to hide, resize, enlarge, shrink or move the content.
  • It makes the content look good on any screen.
  • It is viewed on to provide an optimal viewing experience and it is automatically adjusting the structure of the webpage based on device.

For Example,

<!DOCTYPE html>
<html>
   <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <style>
         * {
         box-sizing:border-box;
         }
         .left {
         background-color:#2196F3;
         padding:20px;
         float:left;
         width:20%; /* The width is 20%, by default */
         }
         .main {
         background-color:#f1f1f1;
         padding:20px;
         float:left;
         width:60%; /* The width is 60%, by default */
         }
         .right {
         background-color:#4CAF50;
         padding:20px;
         float:left;
         width:20%; /* The width is 20%, by default */
         }
         /* Use a media query to add a break point at 800px: */
         @media screen and (max-width:800px) {
         .left  , .main, .right {width:100%;}
         }
      </style>
   </head>
   <body>
      <h2>Media Queries</h2>
      <p>Resize the browser window, up and down around 800px wide.</p>
      <div class="left">
         <p>Left</p>
      </div>
      <div class="main">
         <p>Main Content</p>
      </div>
      <div class="right">
         <p>Right</p>
      </div>
   </body>
</html>

Output

Categorized in:

Web Designing

Tagged in:

, , , , , , , , , , , ,