A responsive web design will adapt automatically to various screen sizes and viewports.
Responsive Web Design involves utilizing HTML and CSS to dynamically resize, hide, condense, or expand a website, ensuring its optimal appearance across all devices, including desktops, tablets, and phones.
For responsive website creation, include the following <meta> tag on all your web pages:
Example
| <meta name=”viewport” content=”width=device-width, initial-scale=1.0″> |
This sets the viewport of your page, providing the browser with directives on managing the page’s dimensions and scaling.
Below is an example illustrating a web page without the viewport meta tag, followed by the same web page with the viewport meta tag:
| Note: If you are viewing this page on a smartphone or tablet, you can tap on the two links above to observe the contrast. |
Responsive images are images that adjust smoothly to accommodate any browser size.
When the CSS width property is configured to 100%, the image becomes responsive, allowing it to resize proportionally to both larger and smaller dimensions.
Example
| <img src=”img_girl.jpg” style=”width:100%;”> |
Observe that in the aforementioned example, the image can be enlarged beyond its original dimensions. In many scenarios, a preferable approach would be to utilize the max-width property instead.
When the max-width property is defined as 100%, the image will shrink if necessary, but it won’t enlarge beyond its original dimensions.
Example
| <img src=”img_girl.jpg” style=”max-width:100%;height:auto;”> |
The HTML <picture> element enables you to specify varying images for different browser window sizes.
Adjust the browser window size to observe how the image below adapts based on the width.
Example
| <picture> <source srcset=”img_smallflower.jpg” media=”(max-width: 600px)”> <source srcset=”img_flowers.jpg” media=”(max-width: 1500px)”> <source srcset=”flowers.jpg”> <img src=”img_smallflower.jpg” alt=”Flowers”> </picture> |
Text size can be specified using the “vw” unit, representing the “viewport width”.
This ensures that the text size adjusts according to the dimensions of the browser window.
Example
| <h1 style=”font-size:10vw”>Hello World</h1> |
The viewport refers to the size of the browser window. In this context, 1vw equals 1% of the viewport width. For example, if the viewport is 50cm wide, then 1vw would equate to 0.5cm.
Aside from resizing text and images, media queries are frequently employed in responsive web design.
Media queries enable the specification of distinct styles for various browser sizes.
For instance, adjust the browser window size to observe that the three div elements below will arrange horizontally on larger screens and stack vertically on smaller screens.
Example
| <style> .left, .right { float: left; width: 20%; /* The width is 20%, by default */ } .main { /* Use a media query to add a breakpoint at 800px: */ |
A responsive webpage should appear visually appealing both on expansive desktop screens and on compact mobile phones.
Responsive design is a standard feature across all major CSS Frameworks.
They are freely available and straightforward to implement.
Code7School.CSS is a contemporary CSS framework that inherently supports desktop, tablet, and mobile design.
C7S.CSSis similar CSS frameworks, CSS is more compact and quicker.
C7S.CSS is engineered to operate autonomously, devoid of dependencies on jQuery or any other JavaScript library.
Adjust the page size to observe its responsiveness!
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.w3schools.com/w3css/4/w3.css”> </head> <body> <div class=”w3-container w3-green”> <h1>W3Schools Demo</h1> <p>Resize this responsive page!</p> </div> <div class=”w3-row-padding”> <div class=”w3-third”> <h2>London</h2> <p>London is the capital city of England.</p> <p>It is the most populous city in the United Kingdom, with a metropolitan area of over 13 million inhabitants.</p> </div> <div class=”w3-third”> <h2>Paris</h2> <p>Paris is the capital of France.</p> <p>The Paris area is one of the largest population centers in Europe, with more than 12 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> </body> </html> |
Bootstrap is another widely-used CSS framework.
Example
| <!DOCTYPE html> <html lang=”en”> <head> <title>Bootstrap 5 Example</title> <meta charset=”utf-8″> <meta name=”viewport” content=”width=device-width, initial-scale=1″> <link href=”https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css”rel=”stylesheet”> <scriptsrc=”https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js”></script> </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> |
