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...