In this tutorial, we will learn to make the webpage layout responsive in HTML with the help of examples.
Responsive
Responsive web design is used to make a web page that looks better and clear on all devices. It makes the code shorter by using the same CSS for all the devices. Responsive web design uses HTML and CSS to hide, shrink, resize, enlarge, or move the content. It will automatically adjust the webpage design for different screen sizes and viewports.
Set the Viewport
How to set the viewport : To create a responsive website, add the <meta> tag to all your webpages.
Viewport <meta> tag will give instructions to the browser on how to control the dimensions and scaling of the webpage.
Note : Viewport <meta> tag is must be put in the <head> tag to design a responsive webpage.
Responsive Images
The responsive images are those images which can be scale nicely to fit any browser size.
By using the width Property
By setting the CSS width property to 100%, to make the image responsive and scale up and down.
Note : The image that can be scaled up to be larger (width: 100%) than its original size. So, it is better to use the max-width property instead.
Example :
<!DOCTYPE html> <html> <head> <title>Responsive Images</title> <metaname = "viewport"content = "width = device-width, initial-scale = 1.0"> </head> <body> <h2>Responsive Images</h2> <p>By setting the CSS width property to 100%, to make the image responsive <br> and scale up and down. Resize the browser window to see the effect.</p> <imgsrc = "boat.jpg"style = "width : 100%"> </body> </html>
Output
Responsive Images
By setting the CSS width property to 100%, to make the image responsive and scale up and down. Resize the browser window to see the effect.
By using the max-width Property
max-width property is the most suitable and widely used method to make an image because it shows that the image will scale Down if it has to, but never scale up to be larger than its original size.
Example :
<!DOCTYPE html> <html> <head> <title>Responsive Images</title> <metaname = "viewport"content = "width = device-width, initial-scale = 1.0"> </head> <body> <h2>Responsive Images</h2> <p>By setting the CSS max-width property to 100%, to make the image responsive <br> but ensures that the image never scale up to be larger than its original size.</p> <imgsrc = "sun.jpg"style = "max-width : 100%"> </body> </html>
Output
Responsive Images
By setting the CSS max-width property to 100%, to make the image responsive but ensures that the image never scale up to be larger than its original size.
Change the images with the Browser width
By using HTML <picture> tag, we can set different images according to the browser width. It will change the image whenever we change the size of the browser.
Example :
<!DOCTYPE html> <html> <head> <title>Change Images with Viewport</title> <metaname = "viewport"content = "width = device-width, initial-scale = 1.0"> </head> <body> <h2>Change the image with the browser width</h2> <p>Resize the browser width and the image will change at 500px and 1000px</p> <picture> <sourcesrcset = "girl.jpg"alt = "Image not Found"media = "(max-width : 600px)"> <sourcesrcset = "sun.jpg"alt = "Image not Found"media = "(max-width : 1000px)"> <sourcesrcset = "boat.jpg"alt = "Image not Found"width = "100%"> </picture> </body> </html>
Output
Change the image with the browser width
Resize the browser width and the image will change at 500px and 1000px
Change the Font size with the Browser width
We can use vw and vh as font size unit.
Font size working : 1vw = 1 % of viewport width i.e. 1% of the total width of viewport
For example, let the viewport width 1200px, then 1vw is equal to 12px. So we get 12px as font size.
Example :
<!DOCTYPE html> <html> <head> <title>Responsive Font</title> <metaname = "viewport"content = "width = device-width, initial-scale = 1.0"> </head> <body> <h1style = "font-size : 10vw;">The size of text is 10vw.</h1> <pstyle = "font-size : 5vw;">The size of text is 5vw.</p> <p>Resize the browser width to see how the text size changes.</p> </body> </html>
Output
The size of text is 10vw.
The size of text is 5vw.
Resize the browser width to see how the text size changes.
Next Tutorial
We hope that this tutorial helped you develop better understanding of the concept of Responsive in HTML.
Keep Learning : )
In the next tutorial, you'll learn about HTML Computer Code.
