How to make a different amount of content in an adaptive?

Question

Adaptive design

The question is as follows.
Let's say we have an adaptive design and let's say on mobile phones and tablets we need to display 2 product cards, on the desktop 3 product cards, we also have a button to download more.
It turns out when loading the page, we find out the width of the window (let's say 320 = mob), make an ajax request, get json data and display 2 cards. We track the change in the window if it becomes more than 1024, delete everything, make an ajax request and display 3 product cards already.
Is this how it's done? And is it done at all?

Answer 1

You can do whatever you want. Specifically as you described. Using javascript + css.
Usually they just make an adaptive layout, sometimes they hide extra blocks on mobile devices, I don’t think that you need to delete anything when changing the size ... this is definitely not very correct. Yes, and it will be inconvenient to cache the page, + SEO if the page is landing. Usually the page should be the same in content on both mobile and desktop, you just need to change/hide unnecessary blocks. For example, on a wide screen, show 3 in a row, and on a narrow screen, 1 in a row, but still 3.

Answer 2

As they wrote to you in the comments: responsive design means changing the way content is displayed so that it is conveniently available on different form factors. But it does not mean changing the content itself.
And if you come across such an order, convince the designer that he is wrong.
However, there are all sorts of situations, and your case is not quite typical. I would implement like this:

1. It will contact the server, download information for how many cards, say for 10.
   
2. Look at the width of the screen.
   
3. Display 2 or 3 cards depending on the form factor. Leave the rest in memory.
   
4. By clicking on "load more" we get 2-3 more cards from memory and display them.
   
5. If the cards in memory run out, make a request to the server and download 10 more.
   

Answer 3

I just want to understand this issue. I've seen layouts like this many times. And let's say a customer came across who foams at the mouth and says I want it, just like in the layout.

Brad, show at least one such layout.
ALL templates change their display according to media queries, so these cards of yours are loaded in the appropriate number.
If you care about the load on the victim's mobile phone, then saving on matches.
And again - show at least one pattern you mentioned.
Well, the question was put stupidly, half of the respondents did not even immediately understand what was needed according to the results ... You are worthy of these answers.