Course Content
HTML Introduction
0/1
HTML Editors
0/1
HTML Basic Tags
0/1
HTML Elements
0/1
HTML Attributes
0/1
HTML Headings
0/1
HTML Paragraph
0/1
HTML Text Formatting
0/1
HTML Meta Tags
0/1
HTML Quotations
0/1
HTML Comments
0/1
HTML Images
0/1
HTML Background
0/1
HTML Colors
0/1
HTML Lists
0/1
HTML Tables
0/1
HTML Forms
0/1
HTML Spell Check
0/1
HTML Media
0/1
HTML Marquees
0/1
HTML CSS
0/1
HTML Links
0/1
HTML Block & Inline
0/1
HTML Classes
0/1
HTML Id
0/1
HTML I frames
0/1
HTML Java script
0/1
HTML File paths
0/1
HTML Layout
0/1
HTML Responsive
0/1
HTML Computer Code
0/1
HTML Tutorial
About Lesson

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 hideshrinkresizeenlarge, 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.

Exercise Files
No Attachment Found
No Attachment Found
error: Content is protected !!