Loading...
HTML Responsive

HTML Responsive

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.

Syntax Viewport meta Tag

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

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>
    <meta name = "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>
      <img src = "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>
    <meta name = "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>
    <img src = "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>
    <meta name = "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>
      <source srcset = "girl.jpg" alt = "Image not Found" media = "(max-width : 600px)">
      <source srcset = "sun.jpg" alt = "Image not Found" media = "(max-width : 1000px)">
      <source srcset = "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

Image not Found

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>
    <meta name = "viewport" content = "width = device-width, initial-scale = 1.0">
  </head>
  <body>
    <h1 style = "font-size : 10vw;">The size of text is 10vw.</h1>
    <p style = "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.

- Related Topics