What you need to add in a html document to make page responsive ?

Setting The Viewport

To create a responsive website, add the following <meta> tag to all your web pages:

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

Responsive Images

Using the max-width Property

If the max-width property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size.

Show Different Images Depending on Browser Width

The HTML <picture> element allows you to define different images for different browser window sizes.

<picture>
  <source srcset="img_smallphoto.jpg" media="(max-width: 600px)">
  <source srcset="img_photo.jpg" media="(max-width: 1500px)">
  <source srcset="photo.jpg">
  <img src="img_smallphoto.jpg" alt="Flowers">
</picture>

Responsive Text Size

The text size can be set with a vw unit, which means the viewport width. (Viewport is the browser window size. 1vw = 1% of viewport width. If the viewport is 50cm wide, 1vw is 0.5cm.)

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages.

With media queries you can define completely different styles for different browser sizes.