HTML Responsive Web Design
Responsive web design is about making pages that look good on all devices. A responsive page automatically adjusts for different screen sizes and viewports.
What is Responsive Web Design?
Responsive web design uses HTML and CSS to automatically resize, hide, shrink, or enlarge a website so it looks good on all devices, from desktops to tablets to phones.
Setting The Viewport
To make a site responsive, add the viewport <meta> tag to every page. It tells the browser how to control the page's size and scaling.
Example
A page that includes the viewport meta tag.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1>Responsive Web Design</h1>
<p>This page includes the viewport meta tag, so it scales correctly on all devices.</p>
</body>
</html>
Responsive Images
Responsive images scale nicely to fit any browser size. If the CSS width property is set to 100%, the image scales up and down, but it can grow larger than its original size. Using max-width at 100% instead lets the image scale down but never grow beyond its original size.
Using width
An image with width set to 100%.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Img Width</title>
</head>
<body>
<img src="img_girl.jpg" style="width:100%;">
</body>
</html>
Using max-width
An image with max-width set to 100%.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Img Maxwidth</title>
</head>
<body>
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Show Different Images Depending on Browser Width
The <picture> element lets you show different images for different browser window sizes.
Example
Different flower images at different widths.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Picture</title>
</head>
<body>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source srcset="flowers.jpg">
<img src="img_smallflower.jpg" alt="Flowers">
</picture>
</body>
</html>
Responsive Text Size
Text size can be set in vw units, which means viewport width, so the text follows the size of the browser window. 1vw is 1% of the viewport width, so if the viewport is 50cm wide, 1vw is 0.5cm.
Example
A heading sized in viewport-width units.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Text</title>
</head>
<body>
<h1 style="font-size:10vw">Hello World</h1>
</body>
</html>
Media Queries
Besides resizing text and images, responsive pages often use media queries. With a media query you can define completely different styles for different browser sizes, such as showing columns side by side on large screens and stacking them on small screens.
Example
Columns that stack on screens 800px or smaller.
Output: complete HTML page
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
.left, .right {
float: left;
width: 20%; /* The width is 20%, by default */
}
.main {
float: left;
width: 60%; /* The width is 60%, by default */
}
/* Use a media query to add a breakpoint 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>
<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>
Responsive Web Page - Full Example
A responsive web page should look good on large desktop screens and on small mobile phones.
Responsive Web Design - Frameworks
All popular CSS frameworks offer responsive design. They are free and easy to use.
Bootstrap
Bootstrap is another popular CSS framework for responsive design.
Example
A responsive page built with Bootstrap 5.
Output: complete HTML page
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
</div>
</div>
</div>
</body>
</html>