How to Make Responsive Web Design using HTML

In this article, you will learn How to Make Responsive Web Design using HTML.
Responsive Web Design is about using HTML and CSS to automatically resize on all devices (desktops, tablets, and Mobiles).

Setting the Viewport

When you make responsive web pages, add the <meta> element in all your web pages

Example:-

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Image using the Width Property

If your CSS width property is set to 100%, the image will be responsive.

Example:-

<img src="img_girl.jpg" style="width:100%;">

Responsive Text Size

Using the ‘vw’ of text size, It means ‘Viewport Width’.

Example:-

<html>
<head>
<title>HTML Responsive</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h1 style="font-size:10vw;">Responsive Text</h1>
<p style="font-size:5vw;">Resize the browser window to see how the text size Text.</p>
</body>
</html>