HTML RESPONSIVENESS

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones)

The Viewport While designing responsive web pages, add the following <meta> element in all your web pages This will set the viewport of your page, which will give the browser instructions on how to control the page’s dimensions and scaling.

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

width Property:  If the CSS width property is set to 100%, the image will be responsive and scale up and down

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

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

<img src="img_girl.jpg" style="max-width:100%;height:auto;">

Different Images Depending on Browser Width:

The HTML <picture> element allows you to define different images for different browser window sizes. Resize the browser window to see how the image below change depending on the width

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

Responsive Text Size: The text size can be set with a “VW” unit, which means the “viewport width”. That way the text size will follow the size of the browser window

<h1 style="font-size:10vw">Hello World</h1>