HTML Responsive

What is responsive website design?

Responsive design is a response to the proliferation of screens and devices that we’re increasingly reliant upon in the 21st century.

Responsive design aims, at least, to answer the problem of multiple screen sizes and create a unified system across all types of device, whether it’s a traditional desktop or a tiny smartphone.

Responsive

Setting The Viewport

To set the viewport to create a responsive website use <meta> tag to all your web pages:

Example

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

Try this code ❯

Responsive Images

The responsive images are images that scale to fit any browser size.

The width & height Property

The CSS width & height property is used to set the image width and height.

This example shows how to set image width and height:

Example

<img src="flowers.jpg" width="640" height="625">

Try this code ❯

Responsive Width and Height Property

This example shows how to set responsive width and height for image:

Example

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

Try this code ❯

Using multiple images

to show different images depending on browser width use the HTML <picture> element to define different images for different browser window sizes.

Example

<picture>
  <source srcset="tomato.png" media="(max-width: 300px)">
  <source srcset="milk.png" media="(max-width: 900px)">
  <img src="orange.png" alt="Orange" >
</picture>

Try this code ❯