How to design a responsive Web Page in HTML ?
Last Updated :
09 May, 2023
In this article, we will learn how to design a responsive Web Page in HTML. Responsive web design (RWD) is a web development approach that creates dynamic changes to the appearance of a website, depending on the screen size and orientation of the device being used to view it.
RWD can be obtained by using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices (desktops, tablets, and phones).
Creating a responsive webpage in HTML:
We can make our webpage responsive by adding a “viewport“.The viewport does not have any fixed size. It changes according to the screen orientations and sizes.HTML provides a <meta>tag for setting the viewport.
<meta name=’viewport’ content=’width=device-width, initial-scale=1.0′>
For displaying responsive images on the webpage, we can use the <picture>element of HTML. There are some cases where a browser does not or may not support all types of images, at that point the <picture> can be used where the browser chooses the format it can recognize.
For responsive texts, we use viewport width.” vw” is its unit. A viewport is a browser’s window size.
Though using these tags can make your page responsive it’s always better to use CSS framework and Bootstrap. These provide a better look and feel and make your coding easy.
Example: In this example, we will design a responsive web page.
HTML
<!DOCTYPE html>
<html>
<head>
<meta name='viewport'
content='width=device-width, initial-scale=1.0'>
</head>
<body>
<div style="text-align: center;
background-color: green;">
<h1 style="color: white;">
Responsive Page Using Only HTML
</h1>
<h2 style="color: white;">
To make test responsive
</h2>
<p style="font-size: 5vw;color: white;">
This is for Geeks for Geeks
</p>
<picture>
<img src=
alt="geeksforgeeks">
</picture>
</div>
</body>
</html>
|
Output: The title “Responsive Page Using Only HTML” does not change its size irrespective of screen size but the text “This is for Geeks for Geeks” changes according to the screen size. As we have set “vw”, this makes the text responsive.
Share your thoughts in the comments
Please Login to comment...