HTML Responsive Web Design
- A Web page is considered good when the Web Design is responsive.
- A Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
Setting The Viewport
When making responsive web pages, the following <meta> element is added in all the web pages.
Example
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Setting the Viewport</h2>
<p>This example is just to show how to add the viewport meta element.</p>
</body>
</html>
Responsive Images
Responsive images are images that scale accordingaly to fit any browser size.
Using the width Property
If the CSS width property is set to 100%, the image will be responsive and scale up and down:
Example
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Responsive Image</h2>
<p>"max-width:100%" prevents the image from getting bigger than its original size. However, if the browser window is made smaller, the image will still scale down.</p>
<img src="image/greece.jpg" style="max-width:100%;height:auto;">
</body>
</html>
Show Different Images Depending on Browser Width
The HTML <picture> element allows you to define different images for different browser window sizes.
Resize the browser window to see how the image below change depending on the width:
Example
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Show Different Images Depending on Browser Width</h2>
<p>Resize the browser width and the image will change at 600px and 1500px.</p>
</body>
</html>
Responsive Text Size
- The text size can be set with a "vw" unit, which means the "viewport width".
- That way the text size will follow the size of the browser window.
Example
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size scales.</p>
</body>
</html>
Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.
Media Queries
- In addition to resize text and images, it is also common to use media queries in responsive web pages.
- With media queries you can define completely different styles for different browser sizes.