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>

Copy the Code and run it here

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>

Copy the Code and run it here

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.

Next

Related Posts

How to add CSS to HTML

HTML Elements

Images in HTML

HTML Responsive – crus4