Building Flexible Layouts for Different Screen Sizes

In modern web development we have two approaches: adaptive and responsive layouts.

Responsive layouts are designed to have multiple display variations that can smoothly transition between each other, allowing for flexible stretching and resizing of elements. When the viewport size is changed, the blocks on the page are contracted or stretched smoothly, and at a specific breakpoint, they change their positioning to optimize horizontal space usage.

Adaptive layouts have multiple display variations, but the design changes occur through hard-set jumps between breakpoints. Once a breakpoint is reached, the design cannot be changed until the next breakpoint is hit.

Practice

Let's practice and create 2 div elements. The first element will have the adaptive layout, and the second will have the responsive layout. Also, we need to add different values for the background-color property with the screen change.

• For the width from 0 to 320px, the color is #7f58af;
• For the width from 321px to 600px, the color is #64c5eb;
• For the width from 601px to 880px, the color is #eb4dba;
• For the width from 881px, the color is #feb326.

HTML looks like:

<div class="adaptive"></div>
<div class="responsive"></div>

For the adaptive layout, we also need to specify some specific width for the div element.

• For the width from 321px to 600px, the width is 300px;
• For the width from 601px to 880px, the width is 580px;
• For the width from 881px, the width is 860px.

CSS looks like:

div {
  height: 200px;
  margin: 10px auto;
  background-color: #7f58af;
}

/* ===> Adaptive <=== */

@media screen and (min-width: 321px) {
  .adaptive {
    background-color: #64c5eb;
    width: 300px;
  }
}
@media screen and (min-width: 601px) {
  .adaptive {
    background-color: #eb4dba;
    width: 580px;
  }
}
@media screen and (min-width: 881px) {
  .adaptive {
    background-color: #feb326;
    width: 860px;
  }
}

/* ===> Responsive <=== */

.responsive {
  width: 100%;
}

@media screen and (min-width: 321px) {
  .responsive {
    background-color: #64c5eb;
  }
}
@media screen and (min-width: 601px) {
  .responsive {
    background-color: #eb4dba;
  }
}
@media screen and (min-width: 881px) {
  .responsive {
    background-color: #feb326;
  }
}

The result that we get. Please, pay attention to the screen width change in the top part of the recording: