Responsive web design ensures that your web page looks well-organized and visually appealing on all devices, including desktops, tablets, and smartphones. It involves using HTML and CSS techniques to adapt the layout and content of a web page based on the screen size of the device.
Viewport Meta Tag: Ensures proper scaling on mobile devices.
Responsive Images: Use width: 100% or max-width: 100% to make images fit their container.
Different Images for Different Screens: Use <picture> to serve different images based on screen width.
Responsive Text Size: Use viewport units like vw to adjust text size dynamically.
The viewport meta tag is crucial for responsive design. It controls the layout on mobile browsers and ensures that your content is sized correctly.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Design</title>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see how the viewport adjusts the
content.</p>
</body>
</html>
Using width Property: Setting the width property to 100% makes the image responsive, but it might scale the image beyond its original size.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Image</title>
</head>
<body>
<h2>Responsive Image</h2>
<p>Resize the browser window to see the effect.</p>
<img src="img_girl.jpg" style="width:100%;" alt="Girl">
</body>
</html>
Using the <picture> element, you can provide different images for different screen sizes.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Images</title>
</head>
<body>
<h2>Change Images Depending on Browser Width</h2>
<p>Resize the browser width and see the image change.</p>
<picture>
<source srcset="img_smallflower.jpg" media="(max-width: 600px)" alt="Small Flower">
<source srcset="img_flowers.jpg" media="(max-width: 1500px)" alt="Flowers">
<img src="flowers.jpg" alt="Flowers">
</picture>
</body>
</html>
Using viewport units (vw), text size can be responsive to the browser window size.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Responsive Text Size</title>
</head>
<body>
<h1 style="font-size:10vw;">Here size is 10vw.</h1>
<p style="font-size:6vw;">Here size is 6vw.</p>
<p style="font-size:4vw;">Here size is 4vw.</p>
<p>Resize the browser window to see how the text size changes.</p>
</body>
</html>