Responsive design - Wikitechy https://www.wikitechy.com/interview-questions/tag/responsive-design/ Interview Questions Wed, 11 May 2022 09:22:04 +0000 en-US hourly 1 https://wordpress.org/?v=6.9 https://www.wikitechy.com/interview-questions/wp-content/uploads/2025/10/cropped-wikitechy-icon-32x32.png Responsive design - Wikitechy https://www.wikitechy.com/interview-questions/tag/responsive-design/ 32 32 What is Responsive Web Design (RWD) ? https://www.wikitechy.com/interview-questions/web-designing/what-is-responsive-web-design-rwd/ https://www.wikitechy.com/interview-questions/web-designing/what-is-responsive-web-design-rwd/#respond Wed, 11 May 2022 09:20:20 +0000 https://www.wikitechy.com/interview-questions/?p=4333
  • 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

    ]]>     https://www.wikitechy.com/interview-questions/web-designing/what-is-responsive-web-design-rwd/feed/ 0