Responsive layout for different extensions?

Question

Adaptive design

I have a task:

The layout must be made taking into account the principles of adaptive and fluid layout. That is, all blocks/columns should occupy the entire available width of the screen (including side margins), and change their relative position when the proportions change after certain boundary points.
- The `320` pixel wide layout shows how the content will look when the screen width is from `320` to `480` (!) pixels (320 px is the minimum width of the content, it should not shrink anymore).
- The `768` pixel layout shows how the content will look when the screen size is from 481 to 992 (!) pixels.
- The `1200` layout shows how the content will look when the screen width is 993-1200 pixels. That is, where in the 768 layout there were somewhere two columns, and in the 1200 layout there were four, the change from two to four should occur when the screen width reaches 993 pixels.
- If the screen is wider than 1200px, the content must span exactly 1200px and be centered.

I am not familiar with adaptive layout, tell me, can you share links on how to implement it.

Answer 1

Highlight your question. PC mouse -> Find in Google
Responsive layout for different resolutions