NEW

6/recent/ticker-posts

Header Ads Widget

HTML Responsive

Sunday, June 11, 2023

 

HTML Responsive

Responsive Web design

Responsive web design is used to make your web page look appropriate, good, and well placedon 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.

Set the viewport

Let's see how to set the viewport.

how to set the viewport

Responsive Images

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

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.

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>  

Note: A problem with the above method (width: 100%) is that the image can be scaled up to be larger than its original size. So, it is better to use the max-width property instead.

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.

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>  

Change images according to the browser width

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

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>  

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.

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>  

Note: viewport specifies the browser window size. 1vw = 1% of viewport width. Means, if the viewport is 100cm wide, 1vw is 1.0cm.

Media Query

We can also use media query to make responsive websites. Read the details of media query from here: Media Query

Tags:

Post a Comment

0 Comments

Post a Comment

Recents Post

Exploring Paidwork - Your Gateway to Earning Online

Exploring Paidwork - Your Gateway to Earning Online

Slogan Technologies Monday, May 13, 2024

In today's digital age, the possibilities for earning money online are vast and …