- RWD-Responsive Web Design.
- It is used to make your web page look good, appropriate and well placed on all devices like desktops, tablet, smartphones, etc.
- It uses HTML and CSS to hide, resize, enlarge, shrink or move the content.
- It makes the content look good on any screen.
- It is viewed on to provide an optimal viewing experience and it is automatically adjusting the structure of the webpage based on device.
For Example,
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing:border-box;
}
.left {
background-color:#2196F3;
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:#4CAF50;
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%;}
}
</style>
</head>
<body>
<h2>Media Queries</h2>
<p>Resize the browser window, up and down around 800px wide.</p>
<div class="left">
<p>Left</p>
</div>
<div class="main">
<p>Main Content</p>
</div>
<div class="right">
<p>Right</p>
</div>
</body>
</html>
Output
