HTML Responsive

Responsive Web Design is about using HTML and CSS to automatically resize, hide, shrink, or enlarge, a website, to make it look good on all devices.

Setting The Viewport

To create a responsive website, add the following `<meta>` tag to all your web pages:

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

This will give the browser instructions on how to control the page's dimensions and scaling.

Responsive Images

Responsive images are images that scale nicely to fit any browser size. If the CSS `max-width` property is set to 100%, the image will scale down if it has to, but never scale up to be larger than its original size:

Responsive Image Example

Result

Media Queries

In addition to resize text and images, it is also common to use media queries in responsive web pages. With media queries you can define completely different styles for different browser sizes.

Media Query Example

Result