HTML Responsive



Responsive web design is used to make your web page look appropriate, good, and well placed all devices (desktop, tablet, smartphone, etc.)

A responsive web design will automatically adjust for different screen sizes and viewports.

What is Responsive Web Design?

Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the content. It makes the content look good on any screen.

Setting The Viewport

To Make an HTML page responsive simply add this inside the <head> element.


Example :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

With the viewport meta tag


Example :

<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>HTML Responsive</title>
  </head>
  <body>
    <img src="image.jpg" alt="Not Found" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quod dolores labore quos nobis sed, consequatur
      ipsam quam corrupti adipisci magni totam quis obcaecati culpa accusamus ipsa ex harum atque!
    </p>
  </body>
</html>

Output :


Without the viewport meta tag:


Example :

<html>
  <head>
    <title>HTML Responsive</title>
  </head>
  <body>
    <img src="image.jpg" alt="Not Found" />
    <p>
      Lorem ipsum dolor sit amet consectetur adipisicing elit. Eaque quod dolores labore quos nobis sed, consequatur
      ipsam quam corrupti adipisci magni totam quis obcaecati culpa accusamus ipsa ex harum atque!
    </p>
  </body>
</html>

Output : 


Responsive Images

Images which can be scaled nicely to fit any browser size are known as responsive images.

using the width property Set the CSS width property to 100% to make the image responsive and scale up and down.


Example :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Image</title>
  </head>
  <body>
    <h2>Responsive Image</h2>
    <p>
      When we set the CSS width property to 100%, it makes the image responsive. Resize the browser window to see the
      effect.
    </p>
    <img src="image.jpg" style="width: 100%" />( change image)
  </body>
</html>


Notice that in the example above, the image can be scaled up to be larger than its original size. A better solution, in many cases, will be to use the max-width property instead.

Using the max-width Property

This method is best and most used because it facilitates that the image will scale down if it has to, but never scale up to be larger than its original size.


Example :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Image</title>
  </head>
  <body>
    <h2>Responsive Image</h2>
    <p>
      "max-width:100%" makes the image responsive and also ensures that the image doesn't get bigger than its original
      size.
    </p>
    <p>Resize the browser window to see the effect.</p>
    <img src="image.jpg" style="max-width: 100%; height: auto" />
  </body>
</html>


Show Different Images Depending on Browser Width

By using the HTML <picture> element, you can set different images for different browser window sizes. It will change the picture when you change the browser-size. i.e. desktop, laptop and phone.


Example :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Show Different Images Depending on Browser Width</title>
  </head>
  <body>
    <h2>Show Different Images Depending on Browser Width</h2>
    <p>Resize the browser width and the image will change at 600px and 1500px.</p>
    <picture>
      <source srcset="img_smallflower.jpg" media="(max-width: 600px)" />
      (Change image)
      <source srcset="img_flowers.jpg" media="(max-width: 1500px)" />
      (Change image)
      <source srcset="flowers.jpg" />
      <img src="img_flowers.jpg" alt="Flowers" style="width: auto" />
    </picture>
  </body>
</html>

Responsive Text Size

The text size can be set with a "vw" unit, which means the "viewport width". By using this, we can make the text size to follow the browser window screen.


Example :

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Responsive Text Size</title>
  </head>
  <body>
    <h1 style="font-size: 10vw">Here size is 10vw.</h1>
    <p style="font-size: 6vw">Here size is 6vw.</p>
    <p style="font-size: 4vw">Here size is 4vw.</p>
    <p>Resize the browser window to see how the text size changes.</p>
  </body>
</html>

Output :


Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.


Example :

<!DOCTYPE html>
<html>
  <head>
    <head>
      <meta name="viewport" content="width=device-width, initial-scale=1.0" />
      <title>Media Query</title>
    </head>
    <style>
      * {
        box-sizing: border-box;
      }

      .left {
        background-color: #78a8cf;
        padding: 20px;
        float: left;
        width: 20%; /* The width is 20%, by default */
      }

      .main {
        background-color: #eb9b9b;
        padding: 20px;
        float: left;
        width: 60%; /* The width is 60%, by default */
      }

      .right {
        background-color: #95e598;
        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%; /* The width is 100%, when the viewport is 800px or smaller */
        }
      }
    </style>
  </head>
  <body>
    <h2>Media Queries</h2>
    <p>Resize the browser window.</p>

    <p>Make sure you reach the breakpoint at 800px when resizing this frame.</p>

    <div class="left">
      <p>Left Menu</p>
    </div>

    <div class="main">
      <p>Main Content</p>
    </div>

    <div class="right">
      <p>Right Content</p>
    </div>
  </body>
</html>

Output :