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>
1 Comment