HTML Responsive

HTML Responsive web design is about creating web pages that look good and appropriate on all devices (Smartphones, Tablets, Desktops).
A Responsive website uses HTML and CSS to adjust or resize the content. It makes the content look good and attractive on all screen sizes.
Create Responsive Website
For creating a Responsive website the first thing we have to do is to write the <meta> tag with some attributes inside the <head> element on all our web pages, Like this:
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> </body> </html>
This <meta> tag sets the viewport of our page, that tells the browser how to control the page’s dimensions.
Responsive Images
Responsive Images are the images that can be displayed correctly on any screen or that can scale nicely to fit any browser screen.
Make Responsive Images
We can make the Responsive images by using the following ways:
- Using the width property
If we set CSS width property to 100%, the image will became responsive and scale Up & Down.
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h3>Responsive image</h3> <p>When we set the CSS width property to 100%, the image will scale up and down when resizing the browser window. Resize the browser window to see the effect.</p> <img src="https://crus4.com/wp-content/uploads/2022/08/hommee.jpeg" style="width:100%;"> </body> </html>
- Using max-width property
if we set the max-width property to 100% and height to auto, the image will scale down if it has to, but never scale up to be larger than its original size.
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h3>Responsive image</h3> <p> The CSS property "max-width:100%" prevents the image from getting bigger than its original size. But, if you make the browser window smaller, the image will still scale down.</p> <p>Resize the browser window to see the effect.</p> <img src="https://crus4.com/wp-content/uploads/2022/08/hommee.jpeg" style="max-width:100%;height:auto;"> </body> </html>
Responsive Text Size
We can also change the text size by setting up the “vw” unit inside the particular element. In this way the text size will follow the browser window.
Example
<!DOCTYPE html> <html> <head> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head> <body> <h2 style="font-size:10vw;"> This is a Responsive Text</h2> <p style="font-size:5vw;">Resize the browser window to see how the text size changes.</p> </body> </html>
Output
This is a Responsive Text
Resize the browser window to see how the text size changes.
Note:- Here the “vm” means the “viewport width”.
Show different images according to the browser width
We can also display different images for different browser sizes, by using the HTML <picture> Element. To learn more about it check our HTML <picture> Element Tutorial.
Related Posts
4 thoughts on “HTML Responsive – crus4”