HTML Responsive

by

To make a web page look proper, good, and fit on different devices of various sizes various HTML and CSS methods are used to resize, hide, contract, expand, or relocate the content. This is known as Responsive web design.

Set the Viewport:

Viewport gives the instructions to the browser for controlling a web page’s dimensions and scaling.

Example: Web page without the viewport <meta> tag:

<!DOCTYPE html>  
<html>  
<body>  
<p><b>Check this example on a phone or a tablet.</b></p>  
<img src="img.jpg" alt="sky" width="400" height="300">  
<p>  
Lorem ipsum dolor sit amet..... mazim placerat  
facer possim assum.  
</p>  
</body>  
</html>

Explanation:

In the above example, we have displayed the view of the page on a phone or a tablet when we don’t use the HTML Viewport method.

Example: Web page with the viewport <meta> tag:

<!DOCTYPE html>  
<html>  
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>  
</head>
<body>  
<p><b>Check this example on a phone or a tablet.</b></p>  
<img src="img.jpg" alt="sky" width="400" height="300">  
<p>  
Lorem ipsum dolor sit amet..... mazim placerat  
facer possim assum.  
</p>  
</body>  
</html>

Explanation:

In the above example, we have displayed the view of the page on a phone or tablet when we use the HTML Viewport method.

Responsive Images:

Well-scaled images to fit on any device of any size are known as responsive images. To make Image Responsive:

Using the width property:

To make an image responsive, set the CSS width property to 100% and scale up and down.

Example:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Using the width property</h2>
<img src="img.jpg" style="width:100%;">
</body>
</html>

Explanation:

In the above example, we made an image responsive, using the CSS width property.

Using the max-width Property:

It is an excellent method and is mostly used. With this method, the image will scale down if it has to. The image however never scales up to be larger than its original size.

Example:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Using the max-width Property</h2>
<img src="img.jpg" style="max-width:100%; height:auto;">
</body>
</html>

Explanation:

In the above example, we made an image responsive, using the max-width property.

Change images depending on browser width:

The HTML <picture> element is used to set more than one image depending on the browser width. The picture changes when the browser size changes.

Example:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h2>Resize the browser width to see the effect.</h2>
<picture>
  <source srcset="img_1.jpg" media="(max-width: 600px)">
  <source srcset="img.jpg" media="(max-width: 1500px)">
  <source srcset="img_2.jpg">
  <img src="img.jpg" alt="Flowers" style="width:auto;">
</picture>
</body>
</html>

Explanation:

In the above example, we made an image responsive, using the HTML <picture> element.

Responsive Text-size:

The Responsive text size is the one that follows the browser window screen. It is possible to use the “vw” (viewport-width).

Example:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">HELLO WORLD!!</h1>
<p style="font-size:5vw;">How are you?</p>
<p>Keep Smiling.</p>
</body>
</html>

Explanation:

In the above example, we made an image responsive, using the viewport-width.

Media Query:

Media queries are often used in responsive web pages, with the purpose of defining completely different styles for different browser sizes.

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
* {
  box-sizing:border-box;
}
.first {
  background-color:crimson;
  color:white;
  padding:30px;
  float:left;
  text-align:center;
  width:20%; /* The width is 20%, by default */
}
 
.second {
  background-color:lightgray;
  color:black;
  padding:30px;
  float:left;
  text-align:center;
  width:60%; /* The width is 60%, by default */
}
 
.third {
  background-color:yellow;
  color:red;
  padding:30px;
  float:left;
  text-align:center;
  width:20%; /* The width is 20%, by default */
}
 
/* Use a media query to add a break point at 800px: */
@media screen and (max-width:800px) {
  .first, .second, .third {
    width:100%; /* The width is 100%, when the viewport is 800px or smaller */
  }
}
</style>
</head>
<body>
<h2>Resize the browser window to see the effect.</h2>
<div class="first">
  <h2>FIRST</h2>
</div>
<div class="second">
  <h2>SECOND</h2>
</div>
<div class="third">
   <h2>THIRD</h2>
</div>
</body>
</html>

Explanation:

In the above example, we are using media queries to make a web page responsive.