Fluid and responsive design: what are the differences in creation for a designer, how many devices should be the output?

Question

Design

Guys, tell me, what are the differences? And how many options to give in the end?

Answer 1

The main difference is that the fluid design stretches/shrinks depending on the screen resolution on which it is displayed, while the adaptive design is rebuilt - some elements may disappear/appear, move down/up, etc., respectively, these are different approaches for the designer to creating a layout, for a layout designer - different approaches to layout (use of certain technologies / frameworks, etc.).
In terms of "what to give back" for responsive design, you can focus on Bootstrap - they have a good breakdown by device:
Mobile-First approach:

/* Custom, iPhone */ 
@media only screen and (min-width : 320px) {
}
/* Extra Small Devices, Phones */ 
@media only screen and (min-width : 480px) {
}
/* Small Devices, Tablets */
@media only screen and (min-width : 768px) {
}
/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {
}
/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {
}

Non-Mobile-First Approach:

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1200px) {
}
/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
}
/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
}
/* Extra Small Devices, Phones */ 
@media only screen and (max-width : 480px) {
}
/* Custom, iPhone */ 
@media only screen and (max-width : 320px) {
}

Answer 2

In the minimum version 2: for regular screens and for mobile phones (mobile first from Google).