Full Example of HTML Responsive
HTML Responsive Design will show your page according to Devices fitted
index.html
Example:
HTML
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* { box-sizing: border-box;
}
.menu { float: left; width: 20%;
}
.menuitem { padding: 8px; margin-top: 7px; border-bottom: 1px solid #f1f1f1;
}
.main { float: left; width: 60%; padding: 0 20px; overflow: hidden;
}
.right { background-color: lightblue; float: left; width: 20%; padding: 10px 15px; margin-top: 7px;
}
@media only screen and (max-width:800px) { /* For tablets: */ .main { width: 80%; padding: 0; } .right { width: 100%; }
}
@media only screen and (max-width:500px) { /* For mobile phones: */ .menu, .main, .right { width: 100%; }
}
</style>
</head>
<body style="font-family:Verdana;">
<div style="background-color:#f1f1f1;padding:15px;"> <h1>Cinque Terre</h1> <h3>Resize the browser window</h3>
</div>
<div style="overflow:auto"> <div class="menu"> <div class="menuitem">The Walk</div> <div class="menuitem">Transport</div> <div class="menuitem">History</div> <div class="menuitem">Gallery</div> </div> <div class="main"> <h2>The Walk</h2> <p>The walk from Monterosso to Riomaggiore will take you approximately two hours, give or take an hour depending on the weather conditions and your physical shape.</p> <img src="img_5terre.jpg" style="width:100%"> </div> <div class="right"> <h2>What?</h2> <p>Cinque Terre comprises five villages: Monterosso, Vernazza, Corniglia, Manarola, and Riomaggiore.</p> <h2>Where?</h2> <p>On the northwest cost of the Italian Riviera, north of the city La Spezia.</p> <h2>Price?</h2> <p>The Walk is free!</p> </div>
</div>
<div style="background-color:#f1f1f1;text-align:center;padding:10px;margin-top:7px;font-size:12px;"> This web page is a part of a demonstration of fluid web design made by w3schools.com. Resize the browser window to see the content respond to the resizing.</div>
</body>
</html>
Output should be:
| Full Example of HTML Responsive | HTML Responsive |
| HTML Responsive | HTML Responsive |
| How to Setting The Viewport | HTML Responsive |
| How to create HTML Responsive Images | HTML Responsive |
| How to create HTML Responsive Images Using the max-width Property | HTML Responsive |
| How to show Different Images Depending on Browser Width | HTML Responsive |
| How to create HTML Responsive Text Size | HTML Responsive |
| How to create Media Queries | HTML Responsive |
| How to create Responsive Web Page - Full Example | HTML Responsive |
| How to create HTML Responsive Web Design - Frameworks | HTML Responsive |
|
Type
: |
html |
|
Category
: |
Web Tutorial |
|
Sub Category
: |
HTML Responsive |
|
Uploaded by
: |
Admin |