Summary -

In this topic, we described about the Responsive in detail.

Responsive web design makes web pages to fit into different resolution screens. The devices are desktops/laptops, tablets and mobile phones. The same can be achieved by using CSS and HTML.

Responsive web design nothing but the web page looks the same regardless of the device. The same can be achieved by using the below command.

Syntax -

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

Example -

<!DOCTYPE html>
<html lang="en-us">
<head>
	<title>Responsive Web Design Demo</title>
	<meta name="viewport"content="width=device-width,initial-scale=1.0">
	<style>
		.new {
		    float: left;
		    margin: 7px;
		    padding: 20px;
		    max-width: 450px;
		    height: 250px;
		    border: 2px solid green;
		} 
	</style>
</head>
<body>
	<div class="new">
	  <h2>HTML</h2>
	  <p>HTML tutorial is the latest addition to tutorials library</p>
	</div>
	<div class="new">
	  <h2>SAP ABAP</h2>
	  <p>ABAP tutorial is the latest addition to tutorials library</p>
	</div>
</body>
</html>

Output -

HTML

HTML tutorial is the latest addition to tutorials library

SAP ABAP

ABAP tutorial is the latest addition to tutorials library