It is essential for a developer to create web-pages that are responsive on all devices, i.e., they fit as per the device’s size. Responsive web-pages automatically adjust themselves as per the different devices and viewports. HTML and CSS can be used to hide, shrink, enlarge, etc. a web-page so that it looks attractive on all devices. Let us see how to make responsive web design using HTML and CSS.
For an overall user-friendly experience, it is thus essential to adapt our web-pages to different devices. For example,
Desktop
Tablet
Phone
HTML Responsive Methods
1. Setting Viewport in HTML
As discussed in the previous articles, the tag of the head is useful to create a viewport for a website.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Viewport</h2>
<p>Try to run this code on different websites.</p>
</body>
</html>
Output-
As we can see, the web-page’s scaling is controlled by the browser using the meta viewport.
2. HTML Responsive Images
Images that fit well within an HTML document, precisely with scale, are responsive images. The width of the image is set to 100% to make it responsive.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
<h2>Responsive Image</h2>
<p>The image will scale up and down when resizing the browser window.Resize the browser window.</p>
<img src="images/landscape.jpg" style="width:100%;">
</body>
</html>
Output-
Use of max-width property in HTML
The max-width property set to 100% enables scaling of the image down its original size, if required. It is never scaled up to its original size.
#html tutorials #html #css
