How to Make Responsive Web Design using HTML

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>

2 Comments

  • Milo

    September 11, 2020 - 7:01 pm

    Pretty element of content. I simply stumbled upon your website and in accession capital to assert that I acquire in fact enjoyed account your weblog posts.

    Any way I’ll be subscribing in your feeds or even I success you get admission to consistently quickly.

  • How to use Hide and Show Function using jQuery - Hub of Tutorials

    March 17, 2020 - 3:09 am

    […] in this article, you will learn How to use Hide and Show Function using jQuery. Using hide or show function you can hide or show any content in HTML document. […]

Leave A Reply