HTML Responsive

HTML Responsive Tutorials

1. HTML Responsive

Responsive Web design

Responsive web design is used to make your web page look appropriate, good, and well placed on all devices (desktop, tablet, smartphone, etc.)

Responsive web design uses HTML and CSS to resize, hide, shrink, enlarge, or move the content. It makes the content look good on any screen.

 

 

2. Responsive Images

Images which can be scaled nicely to fit any browser size are known as responsive images.

3. How to make Image Responsive?

By using the width property

Set the CSS width property to 100% to make the image responsive and scale up and down.

4. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h2>Responsive Image</h2>  
  6. <p>When we set the CSS width property to 100%, it makes the image responsive.    
  7. Resize the browser window to see the effect.</p>  
  8. <img src="img_girl.jpg" style="width:100%;">( change image)  
  9. </body>  
  10. </html>  

5. By using the max-width Property

This method is best and most used because it facilitates that the image will scale down if it has to, but never scale up to be larger than its original size.

6. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h2>Responsive Image</h2>  
  6. <p>"max-width:100%" makes the image responsive and also ensures that the image   
  7. doesn't get bigger than its original size.</p>  
  8. <p>Resize the browser window to see the effect.</p>  
  9. <img src="img_girl.jpg" style="max-width:100%;height:auto;"> (Change the image)   
  10. </body>  
  11. </html>  

7. Change images according to the browser width

By using the HTML <picture> element, you can set two or more images according to the browser width. It will change the picture when you change the browser-size. i.e. desktop and phone.

8. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h2>Change Images Depending on Browser Width</h2>  
  6. <p>Resize the browser width and the image will change at 600px and 1500px.</p>  
  7. <picture>  
  8. <source srcset="img_smallflower.jpg" media="(max-width: 600px)">(Change image)  
  9. <source srcset="img_flowers.jpg" media="(max-width: 1500px)">(Change image)  
  10. <source srcset="flowers.jpg">  
  11. <img src="img_flowers.jpg" alt="Flowers" style="width:auto;">  
  12. </picture>  
  13. </body>  
  14. </html>  

9. Responsive Text-size

We can make the text size responsive by using the "uv" unit. It means viewport-width. By using this, we can make the text size to follow the browserwindow screen.

10. Example:

  1. <!DOCTYPE html>  
  2. <html>  
  3. <meta name="viewport" content="width=device-width, initial-scale=1.0">  
  4. <body>  
  5. <h1 style="font-size:10vw;">Here size is 10vw.</h1>  
  6. <p style="font-size:6vw;">Here size is 6vw.</p>  
  7. <p style="font-size:4vw;">Here size is 4vw.</p>  
  8. <p>Resize the browser window to see how the text size changes.</p>  
  9. </body>  
  10. </html>