HTML5 – Responsive design

Responsive design is a design approach that allows web applications to adapt to different screen sizes and resolutions. This is important because the number of devices and screen sizes that users use to access the web has increased significantly in recent years.

There are a number of techniques that developers can use to implement responsive design in their web applications, including:

• Using the @media rule in CSS to apply different styles based on the screen size and resolution.
• Using flexible layout techniques such as the grid system to create flexible and responsive layouts.
• Using responsive images and videos by using the srcset and sizes attributes to specify different sources for different screen sizes.

Here is an example of how to use the @media rule in CSS to create a responsive layout:

/* Small screens */
@media only screen and (max-width: 600px) {
  .container {
    width: 100%;
  }
  .column {
    width: 100%;
  }
}

/* Medium screens */
@media only screen and (min-width: 601px) and (max-width: 900px) {
  .container {
    width: 90%;
  }
  .column {
    width: 50%;
  }
}

/* Large screens */
@media only screen and (min-width: 901px) {
  .container {
    width: 80%;
  }
  .column {
    width: 25%;
  }
}

In this example, the @media rule is used to apply different styles to the .container and .column classes based on the screen size. For small screens (up to 600px), the .container and .column classes are set to 100% width, which makes them full width. For medium screens (601px to 900px), the .container class is set to 90% width, and the .column class is set to 50% width, which creates a two-column layout. For large screens (over 901px), the .container class is set to 80% width, and the .column class is set to 25% width, which creates a four-column layout.