HTML Responsive
What is Responsive in HTML?
Responsive website design (RW) is an approach to web development in which websites are designed and coded for optimal viewing and interaction, no matter what screen size or device is being used from desktop computers to mobile phones and tablets.
The central notion of responsive design is to develop a single website that adapts its layout, content, and functionality based on whether it is being viewed on a desktop or mobile device with different screen sizes.
Set The Viewport
To create a responsive website, add the following <meta> tag between <head> tag in all your web pages:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Meta tag commonly utilized in HTML documents to control the conduct of the viewport on mobile gadgets. It is an important detail in developing responsive web designs that adapt properly to various screen sizes.
HTML Responsive example:
example
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Webpage</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
}
header {
background-color: #333;
color: #fff;
padding: 20px;
text-align: center;
}
nav {
background-color: #555;
color: #fff;
padding: 10px;
text-align: center;
}
section {
padding: 20px;
text-align: center;
}
footer {
background-color: #333;
color: #fff;
padding: 10px;
text-align: center;
position: fixed;
bottom: 0;
width: 100%;
}
@media screen and (min-width: 768px) {
body {
display: flex;
flex-direction: column;
height: 100vh;
}
nav {
order: 1;
width: 20%;
}
section {
order: 2;
width: 80%;
}
footer {
order: 3;
width: 100%;
}
}
</style>
</head>
<body>
<header>
<h1>Responsive Webpage</h1>
</header>
<nav>
<ul>
<li><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
</ul>
</nav>
<section>
<h2>Main Content</h2>
<p>This is the main content of the webpage.</p>
</section>
<footer>
<p>Footer</p>
</footer>
</body>
</html>
Try it Yourself »