Example 1
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Setting the viewport using <strong>meta tag</strong>
</p>
<p>You can easily read this because the meta tag is present</p>
<p>Remove the meta tag and experiment!</p>
</body>
</html>
Example 2
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Setting image using <strong>width:100%</strong>
</p>
<p>
Try resizing the browser window to see how it works.
</p>
<img src="https://i.postimg.cc/3r69mvTR/large.png" style="width:100%;">
</body>
</html>
Example 3
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Setting image using <strong>max-width:100% and height:auto</strong>
</p>
<img src="https://i.postimg.cc/3r69mvTR/large.png" style="max-width:100%;height:auto;">
<p>
Resize the browser window to see what happens.
</p>
</body>
</html>
Example 4
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<p>Setting font-size using <strong>vw</strong></p>
<p>Resize the browser window to see how the text size changes.
</p>
<p style="font-size:10vw;">font-size: 10vw</p>
<p>No vw</p>
</body>
</html>
Example 5
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
box-sizing: border-box;
}
.first {
background-color: #2196F3;
float: left;
width: 30%;
}
.middle {
background-color: #f1f1f1;
float: left;
width: 20%;
}
.last {
background-color: #04AA6D;
float: left;
width: 50%;
}
/*Specific media query for viewport up to 500px*/
@media screen and (max-width: 500px) {
.last,
.middle,
.first {
width: 100%;
background-color: pink;
border: 1px solid #000;
}
}
</style>
</head>
<body>
<p>Setting specific width or styles using <strong>media queries</strong></p>
<p>Resize the browser window above 500px and experience the change</p>
<div class="first">
<p>First</p>
</div>
<div class="middle">
<p>Middle</p>
</div>
<div class="last">
<p>Last</p>
</div>
</body>
</html>
Example 6
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<p>Creating a simple responsive page using <strong>Bootstrap</strong></p>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>Bootstrap Page</h1>
<p><p>Resize the screen and observe</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>A Block</h3>
<p>Some content</p>
</div>
<div class="col-sm-4">
<h3>B Block</h3>
<p>Some content</p>
</div>
</div>
</div>
</body>
</html>
Example 7
<html>
<head>
<style>
button {
width: 300px;
font-size: larger;
}
.flexContainer {
display: flexbox;
}
</style>
</head>
<body>
<p>Creating a simple yet beautiful responsive blocks using <strong>css flexbox</strong></p>
<div class="flexContainer">
<button>Sunday</button>
<button>Monday</button>
<button>Tuesday</button>
</div>
</body>
</html>
Example 8
<html>
<head>
<style>
.wrapper {
font-size: x-large;
text-align: center;
display: grid;
}
.grid-block {
background-color: rgb(220, 208, 232);
border: 2px solid rgb(70, 54, 84);
}
</style>
</head>
<body>
<p>Creating a simple yet beautiful responsive blocks using <strong>css grid</strong></p>
<div class="wrapper">
<div class="grid-block">Morning</div>
<div class="grid-block">Noon</div>
<div class="grid-block">Evening</div>
<div class="grid-block">Night</div>
</div>
</body>
</html>
Example 9
<html>
<head>
<style>
.wrapper{
font-size: x-large;
text-align: left;
column-count: 3;
column-gap: 2%;
}
.wrapper div
{
background-color: purple ;
color:#fff;
}
</style>
</head>
<body>
<p>Creating a page using CSS <strong>MultiColumn</strong></p>
<div class="wrapper">
<div>
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
Some lengthy text
</div>
</div>
</body>
</html>
Example 10
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
width: 100%;
height: auto;
}
</style>
</head>
<body>
<p>Creating responsive video using <strong>width:100%</strong></p>
<video width="400" controls>
<source src="1.mp4" type="video/mp4">
<source src="1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Resize the browser window and observe the video scaling</p>
</body>
</html>
Example 11
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
video {
max-width: 100%;
height: auto;
}
</style>
</head>
<body>
<p>Creating responsive video using <strong>max-width:100%</strong></p>
<video width="400" controls>
<source src="1.mp4" type="video/mp4">
<source src="1.ogg" type="video/ogg">
Your browser does not support HTML5 video.
</video>
<p>Resize the browser window and observe the video scaling</p>
</body>
</html>
Example 12
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
.holder {
position: relative;
width: 100%;
overflow: hidden;
padding-top: 56.25%; /*16:9 Aspect Ratio= 9/16=56.25*/
}
.fit-iframe {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100%;
height: 100%;
border: none;
}
</style>
</head>
<body>
<p>Creating responsive iframe video by maintaining <strong>aspect ratio</strong></p>
<p>Resize the browser window and observe the iframe video</p>
<div class="holder">
<iframe class="fit-iframe" src="https://www.youtube.com/embed/3FtOP6JW1TE" title="樂 Did You Know 樂"></iframe>
</div>
</body>
</html>
