HTML Responsive

By | January 19, 2020

HTML Responsive Design:-

How our web page will be shown on which device and what type of design will be shown on the tablet screen on our phone screen, this is called Responsive Design. For responsive design, we have the facility to change the size and size through HTML & CSS. I think this is our web page on any device should be a good show.

To create a response, it is necessary to add a <meta> element to the <head> tag of our web page. There are many types of meta tags but viewport meta tag is used for web site. This tag helps to zoom in and out of web page. This is how we set the viewport.

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<img src="shoes.jpg" alt="shoes" style="width: 100%;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea officia, aspernatur reiciendis ab minima autem ipsum animi beatae delectus vero.</p>
</body>
</html>

In the above example, if you do not set the width in an image, then the image will not be set in the response and the image cannot be responsive. We will see right

You can see the result of the given example by putting it in your editor and running it on your browser.

We can set the image to the maximum-width, such that if we set the maximum-width of an image to 100% the image’s width does not exceed 100% and we see a good look in the image-proof device.

sorts of:-

<!DOCTYPE html>
<html lang="en">
<head>
	<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
	<img src="shoes.jpg" alt="shoes" style="max-width: 100%;">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea officia, aspernatur reiciendis ab minima autem ipsum animi beatae delectus vero.</p>
</body>
</html>
Spread the love

Leave a Reply

Your email address will not be published. Required fields are marked *