HTML Responsive
Making websites that display well across all platforms is the goal of responsive (HtmL Responsive) web design!
A responsive web design will adapt to various viewport sizes and screen sizes on its own.
What is Responsive Web Design?
Using HTML and CSS to automatically resize, hide, shrink, or enlarge a website so that it looks well on computers, tablets, and phones is known as responsive web design:
Setting The Viewport
Add the following <meta> tag to each and every one of your web pages to make your website responsive:
Example
<meta name="viewport" content="width=device-width, initial-scale=1.0">
This will configure your page’s viewport, which will instruct the browser on how to manage the page’s scaling and dimensions.
The following is an illustration of a webpage with and without the viewport meta tag:
Responsive Images
A responsive image is one that adapts well to the size of the browser.
Using the width Property
When the CSS width property is 100%, the picture will scale up and down and be responsive:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="width:100%;" alt="Html Responsive - Html Responsive" title="Html Responsive 3" data-lazy-src="img_girl.jpg"><noscript><img decoding="async" src="img_girl.jpg" style="width:100%;" alt="Html Responsive - Html Responsive" title="Html Responsive 3"></noscript>
It is possible to enlarge the image in the example above beyond its initial dimensions by applying a scaling technique. In many circumstances, using the max-width attribute will be a superior option.
Using the max-width Property
The image will resize to fit if necessary if the max-width property is set to 100%, but it will never enlarge to fill the screen:
Example
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" style="max-width:100%;height:auto;" alt="Html Responsive - Html Responsive" title="Html Responsive 4" data-lazy-src="img_girl.jpg"><noscript><img decoding="async" src="img_girl.jpg" style="max-width:100%;height:auto;" alt="Html Responsive - Html Responsive" title="Html Responsive 4"></noscript>
Show Different Images Depending on Browser Width
You can define different images for different browser window sizes with the HTML <picture> element.
Try resizing the browser window to observe how the width affects the image below:
Example
<picture>
<source data-lazy-srcset="img_smallflower.jpg" media="(max-width: 600px)">
<source data-lazy-srcset="img_flowers.jpg" media="(max-width: 1500px)">
<source data-lazy-srcset="flowers.jpg">
<img decoding="async" src="data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%200%200'%3E%3C/svg%3E" alt="Flowers" title="Html Responsive 6" data-lazy-src="img_smallflower.jpg"><noscript><img decoding="async" src="img_smallflower.jpg" alt="Flowers" title="Html Responsive 6"></noscript>
</picture>
Responsive Text Size
The “viewport width” (abbreviated “vw”) unit can be used to adjust the text size.
In this manner, the text size will match the browser window’s size:
Hello World
Resize the browser window to see how the text size scales.
Example
<h1 style="font-size:10vw">Hello World</h1>
Media Queries
In responsive web pages, media queries are frequently used in addition to text and picture resizing.
You can specify entirely distinct styles for various browser widths using media queries.
For instance, you can resize the browser window to observe that the three div elements below will stack vertically on small screens and appear horizontally on large ones:
Example
<style>
.left, .right {
float: left;
width: 30%; /* The width is 30%, by default */
}
.main {
float: left;
width: 70%; /* The width is 70%, 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>
Responsive Web Page - Full Example
Both small mobile phones and large desktop devices should display well on a responsive website.
Responsive Web Design - Frameworks
All popular CSS Frameworks offer responsive design.
They are free, and easy to use.
Codingask.CSS
Codingask.CSS is a modern CSS framework with support for desktop, tablet, and mobile design by default.
Codingask.CSS is smaller and faster than similar CSS frameworks.
Codingask.CSS is designed to be independent of jQuery or any other JavaScript library.
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>
<head>
<title>W3.CSS</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.codingask.com/codingaskcss/4/codingask.css">
</head>
<body>
<div class="w3-container w3-green">
<h1>Codingask Demo</h1>
<p>Resize this responsive page!</p>
</div>
<div class="w3-row-padding">
<div class="w3-third">
<h2>Berlin</h2>
<p>Berlin is the capital city of Germany.</p>
<p>It is the most populous city in the Germnay,
with a metropolitan area of over 3.85 million inhabitants.</p>
</div>
<div class="w3-third">
<h2>Oslo</h2>
<p>Oslo is the capital of Norway.</p>
<p>The Oslo area is one of the largest population centers in Norway,
with more than 0.65 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>
<script>class RocketElementorAnimation{constructor(){this.deviceMode=document.createElement("span"),this.deviceMode.id="elementor-device-mode",this.deviceMode.setAttribute("class","elementor-screen-only"),document.body.appendChild(this.deviceMode)}_detectAnimations(){let t=getComputedStyle(this.deviceMode,":after").content.replace(/"/g,"");this.animationSettingKeys=this._listAnimationSettingsKeys(t),document.querySelectorAll(".elementor-invisible[data-settings]").forEach(t=>{const e=t.getBoundingClientRect();if(e.bottom>=0&&e.top<=window.innerHeight)try{this._animateElement(t)}catch(t){}})}_animateElement(t){const e=JSON.parse(t.dataset.settings),i=e._animation_delay||e.animation_delay||0,n=e[this.animationSettingKeys.find(t=>e[t])];if("none"===n)return void t.classList.remove("elementor-invisible");t.classList.remove(n),this.currentAnimation&&t.classList.remove(this.currentAnimation),this.currentAnimation=n;let s=setTimeout(()=>{t.classList.remove("elementor-invisible"),t.classList.add("animated",n),this._removeAnimationSettings(t,e)},i);window.addEventListener("rocket-startLoading",function(){clearTimeout(s)})}_listAnimationSettingsKeys(t="mobile"){const e=[""];switch(t){case"mobile":e.unshift("_mobile");case"tablet":e.unshift("_tablet");case"desktop":e.unshift("_desktop")}const i=[];return["animation","_animation"].forEach(t=>{e.forEach(e=>{i.push(t+e)})}),i}_removeAnimationSettings(t,e){this._listAnimationSettingsKeys().forEach(t=>delete e[t]),t.dataset.settings=JSON.stringify(e)}static run(){const t=new RocketElementorAnimation;requestAnimationFrame(t._detectAnimations.bind(t))}}document.addEventListener("DOMContentLoaded",RocketElementorAnimation.run);</script></body>
</html>
Bootstrap
Another popular CSS framework is Bootstrap:
Example
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap 5 Example</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container-fluid p-5 bg-primary text-white text-center">
<h1>My First Bootstrap Page</h1>
<p>Resize this responsive page to see the effect!</p>
</div>
<div class="container mt-5">
<div class="row">
<div class="col-sm-4">
<h3>Column 1</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 2</h3>
<p>Lorem ipsum...</p>
</div>
<div class="col-sm-4">
<h3>Column 3</h3>
<p>Lorem ipsum...</p>
</div>
</div>
</div>
