HTML Responsive

Responsive web design is about making your website automatically resized, enlarged or shrinks based on the type of device you use to view the website, it is done using HTML and CSS.

These days, when people are using different kinds of devices for their online activities, the main goal of each website owner is to make it look good for all these devices, such as a desktop, tablet, smartphones etc.

The main purpose of introducing Responsive Web Design approach is to give the best and effective viewing experience to the users, regardless of the type of device they are using.

<meta> element.

When you are going to make a responsive website, <meta> element is needed to be added in all web pages.

Here, you will learn how to define this element.

Example:

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

This example shows how to set the viewpoint of your page, where you have given its name ‘viewpoint’. This element will tell your browser how to display your webpage, where you have given its dimensions and scaling in the ‘content’ element.

Basically, <meta> tag is used to provide the metadata about the HTML document, and is used by browsers, search engines, or other web services.

Responsive Images

As you use <meta> tag to control the view of a webpage on various devices, similarly, you can make your images responsive so that they can too fit nicely as per the browser size.

width property

CSS width property is commonly used for responsive images.

Example:

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

Here, an image filename is specified in the src attribute and width of an image is defined using the style attribute. This attribute is used for styling HTML elements.

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<body>
<h1>Example of Responsive Image </h1>
<img src="good_morning.jpg" style="width:100%;">
</body>
</html>

Note
You can scale image up to larger than its original size. Like, you did in the above example.

max-width property

This property does not let an image to be scaled larger than its original size. The image will be scaled down if you make your browser window small. It means the image will be resized and displayed based on the browser window size.

Example:

<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<body>
<h1>Example of Responsive Image </h1>
<img src="good_morning.jpg" style="max-width:100%;height:auto;" >
</body>
</html>

<picture> property

This HTML element is used to define different images depending on the different browser window sizes.

In other words, you can see different images when you change the width of your browser window.

Example:

<picture>
<img src="good_morning.jpg" media="(max-width:500px)" >
<img src="good_morning.jpg" media="(max-width:1000px)" >
<img src="good_morning.jpg" alt="Have a Nice Day" >
</picture>

You have already learned how to make images in HTML document responsive. Now, here you will learn how to make responsive text.

The size of a text is set using a ‘vw’ unit, which means ‘viewpoint width’. Like an image, your text can also be scaled up and down based on the size of the browser window.

Always remember that viewpoint is the browser window size.
So, 1vw means 1% viewpoint width
If the viewpoint is 30 cm wide, then 1 vw is 0.3cm.

Example:

<h1 style="font-size:10vw;" >Good Morning </h1>
<!DOCTYPE html>
<html>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<body>
<h1 style="font-size:10vw;">Good Morning </h1>
<h1 style="font-size:10vw;">Have a Nice Day </h1>
</body>
</html>

Media Queries

In order to make responsive web pages, media queries play an important role in defining the entire HTML document responsive in addition to text and images.

Media queries help you to define different styles for different sizes of the browser.

Example:

Suppose, you have three elements ‘Left Menu’, ‘Main Content’ and ‘Right Menu’, and you want them to display horizontally on a large browser window and vertically on the small browser window.

It will be defined using style attribute.

Example:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<style>
.left, .right{
background-color:#4CAF50;
padding:10px;
float:left;
width:20%;
}
.main{
background-color:#2196F3;
padding:10px;
float:left;
width:60%;
}
@media screen and(max-width:800px) {
.left,.main,.right{
background-color:#2196F3;
width:100%;
}
}
</style>
<body>
<h1>Main Queries Example </h1>
<div class="left;" >
<p>Left Menu </p>
</div>
<div class="main;" >
<p>Main Content </p>
</div>
<div class="right;" >
<p>Right Menu </p>
</div>
</body>
</html>