Skip to main content

HTML Responsive Web Designs

The goal of responsive web design is to create web pages that appear nice on all devices!

A responsive web design will adapt to changing screen sizes and viewports automatically.

Responsive Web Design is the practise of utilising HTML and CSS to automatically resize, conceal, reduce, or enlarge a website in order for it to look well on all platforms (desktops, tablets, and phones):

Setting The Viewport​

Add the following <meta> tag to all of your web pages to build a responsive website:

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

Responsive Images​

Images that are responsive resize easily to fit any browser size.

Using the width Property​

The picture will be responsive and scale up and down if the CSS width attribute is set to 100%:

Example
<img src="/img/codinghabitslogo.png" style="width:100%;" />

In the preceding example, the image may be scaled up to be larger than its original size. In many circumstances, using the max-width attribute is a superior approach.

Using the max-width Property​

As the max-width attribute is set to 100%, the image will scale down when necessary but will never scale up to be larger than its original size:

Example
<img src="/img/codinghabitslogo.png" style="max-width:100%;height:auto;" />
Try it yourself
Loading...

Show Different Images Depending on Browser Width​

You may use the HTML picture> element to specify various pictures for different browser window sizes.

Resize your browser window to see how the image below changes with width:

Example
<picture>
  <source
    media="(min-width: 650px)"
    srcset="/img/tutorial/leaf.jpg"
    class="image"
  />
  <source
    media="(min-width: 465px)"
    srcset="/img/tutorial/library.jpg"
    class="image"
  />
  <img
    src="/img/codinghabitslogo.png"
    style="height: 300px, width: 300px"
    class="image"
  />
</picture>
Loading...

Responsive Text Size​

The font size may be adjusted using a "vw" unit, which stands for "viewport width."

As a result, the text size will match the size of the browser window:

Example
<h1 style="font-size:10vw">Hello World</h1>
Loading...
note

Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.

Media Queries​

In addition to resizing text and graphics, media queries are commonly used in responsive web pages.

You may set totally distinct styles for different browser widths using media queries.

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

      .left {
        background-color: #3282b8;
        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: #f0db4f;
        padding: 20px;
        float: left;
        width: 20%; /* The width is 20%, by default */
      }

      /* Use a media query to add a break point at 500px: */
      @media screen and (max-width: 500px) {
        .left,
        .main,
        .right {
          width: 100%; /* The width is 100%, when the viewport is 500px or smaller */
        }
      }
    </style>
  </head>
  <body>
    <h2>Media Queries</h2>
    <p>Resize the browser window.</p>

    <p>Make sure you reach the breakpoint at 500px 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>
Loading...