HTML Responsive

HTML Responsive Web Design

Responsive web design is about creating web pages that look good on all devices.

A responsive layout automatically adapts to different screen sizes and viewports.

What Is Responsive Web Design?

Responsive Web Design uses HTML and CSS to resize, hide, shrink, or enlarge content.

This ensures that websites work well on desktops, tablets, and mobile phones.

Setting the Viewport

The viewport controls how a page is displayed on different devices.

To make a page responsive, include the following meta tag.

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

This tells the browser how to control the page’s dimensions and scaling.

Responsive Images

Responsive images scale to fit different screen sizes.

Using the width Property

Setting the image width to 100% makes it scale with the browser window.

<img src="img_girl.jpg" style="width:100%;">

This method can scale images larger than their original size.

Using the max-width Property

Using max-width:100% prevents images from scaling larger than their original size.

<img src="img_girl.jpg" style="max-width:100%; height:auto;">

Responsive Images with picture

The <picture> element allows different images to be displayed at different screen widths.

<picture>   <source srcset="img_smallflower.jpg" media="(max-width: 600px)">   <source srcset="img_flowers.jpg" media="(max-width: 1500px)">   <img src="img_smallflower.jpg" alt="Flowers"> </picture>

Responsive Text Size

Text size can scale with the viewport using the vw unit.

<h1 style="font-size:10vw">Hello World</h1>

The vw unit represents a percentage of the viewport width.

Media Queries

Media queries allow different styles to be applied at different screen sizes.

They are commonly used to change layouts on smaller screens.

@media screen and (max-width: 800px) {   .left, .main, .right {     width: 100%;   } }

Media queries are a core technique in responsive web design.

Chapter Summary

• Responsive design adapts pages to different devices
• The viewport meta tag is essential
• Images and text can scale responsively
• Media queries adjust layouts for screen size