Responsive Web Design Is About Creating Web Pages That Look Good On All Devices
Responsive Web Design Is About Creating Web Pages That Look Good On All Devices
devices!
A responsive web design will automatically adjust for different screen sizes
and viewports.
Try it Yourself »
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Try it Yourself »
This will set the viewport of your page, which will give the browser instructions
on how to control the page's dimensions and scaling.
Here is an example of a web page without the viewport meta tag, and the same
web page with the viewport meta tag:
Tip: If you are browsing this page on a phone or a tablet, you can click on the
two links above to see the difference.
Responsive Images
Responsive images are images that scale nicely to fit any browser size.
Try it Yourself »
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.
Example
<img src="img_girl.jpg" style="max-width:100%;height:auto;">
Try it Yourself »
Resize the browser window to see how the image below changes depending on
the width:
Example
<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>
Try it Yourself »
That way the text size will follow the size of the browser window:
Hello World
Resize the browser window to see how the text size scales.
Example
<h1 style="font-size:10vw">Hello World</h1>
Try it Yourself »
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: resize the browser window to see that the three div elements below
will display horizontally on large screens and stack vertically on small screens:
Left Menu
Main Content
Right Content
Example
<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>
Try it Yourself »
Tip: To learn more about Media Queries and Responsive Web Design, read
our RWD Tutorial.
Try it Yourself »
Ever heard about W3Schools Spaces? Here you can create your website from
scratch or use a template, and host it for free.
W3.CSS
W3.CSS is a modern CSS framework with support for desktop, tablet, and
mobile design by default.
W3.CSS Demo
Resize the page to see the responsiveness!
London
London is the capital city of England.
It is the most populous city in the United Kingdom, with a metropolitan area of
over 13 million inhabitants.
Paris
Paris is the capital of France.
The Paris area is one of the largest population centers in Europe, with more
than 12 million inhabitants.
Tokyo
Tokyo is the capital of Japan.
It is the center of the Greater Tokyo Area, and the most populous metropolitan
area in the world.
Example
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<body>
<div class="w3-container w3-green">
<h1>W3Schools Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>London</h2>
<p>London is the capital city of England.</p>
<p>It is the most populous city in the United Kingdom,
with a metropolitan area of over 13 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Paris</h2>
<p>Paris is the capital of France.</p>
<p>The Paris area is one of the largest population centers in Europe,
with more than 12 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Tokyo</h2>
<p>Tokyo is the capital of Japan.</p>
<p>It is the center of the Greater Tokyo Area,
and the most populous metropolitan area in the world.</p>
</div>
</div>
</body>
</html>
Try it Yourself »
Bootstrap
Another popular CSS framework is Bootstrap. Bootstrap uses HTML, CSS and
jQuery to make responsive web pages.
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/
3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.1/jquery.mi
n.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap
.min.js"></script>
</head>
<body>
<div class="container">
<div class="jumbotron">
<h1>My First Bootstrap Page</h1>
</div>
<div class="row">
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
<div class="col-sm-4">
...
</div>
</div>
</div>
</body>
</html>