What is Responsive Web Design (RWD) ?

  • 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

Leave a Reply

Your email address will not be published.

You May Also Like

What is Flexbox ?

It is a one-dimensional layout model that has efficient and flexible layouts with distributed spaces among items to control their alignment structure in CSS . It is a layout model…
View Answer

What is JS ?

It is a small piece of javascript program that can add user interactivity to your website. A Script could provide a dropdown menu and generate a pop-up alert box message.…
View Answer

What is the difference between SOAP and REST ?

                  SOAP                    REST It is a protocol. It is an architectural style. SOAP- Simple Object Access Protocol. REST- Representational State Transfer. It can’t use REST because it is a…
View Answer

What is Grid system ?

It is a structure comprising a series of vertical and horizontal lines which intersect and used to arrange content. Is a way of providing a system that designers can work with…
View Answer