Responsive Designin CSS3

 Responsive Designin CSS3

Responsive design is a technique used to create web pages that adapt to different screen sizes and devices. CSS3 provides several new features that make it easier to create responsive designs, such as media queries and viewport units.

html

<div class="container">

  <div class="box">Box 1</div>

  <div class="box">Box 2</div>

  <div class="box">Box 3</div>

</div>

css

.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

}

.box {

  width: 200px;

  height: 200px;

  background-color: blue;

  color: white;

  display: flex;

  justify-content: center;

  align-items: center;

}

@media (max-width: 768px) {

  .box {

    width: 100px;

    height: 100px;

  }

}

In this example, we have created a container with three boxes inside. We have used the flex-wrap property to ensure that the boxes wrap to the next line when the container is too narrow. We have also used a media query to change the width and height of the boxes when the screen size is less than or equal to 768 pixels.