Course Content
Advanced CSS Techniques
Advanced CSS Techniques
Adaptive - Responsive layouts
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:
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:
The result that we get. Please, pay attention to the screen width change in the top part of the recording:
Thanks for your feedback!