What layouts should I start learning about responsive layout?

Question

PSD

Hello! Now I started to study the layout of adaptive layouts and faced the question, what layout can I take to start with? Many articles say that, in principle, it is possible to make a mobile layout out of any desktop layout, although something normal will not always come out of this. And many write that the adaptive layout should be such already at the initial stages of development. So I don’t know what to do at the beginning of the path ... or take any fix. layout and try to adapt it according to your vision (although without experience I think it’s difficult) or look for specials. layouts specifically for adaptive layout. Who started with what? What to choose? Tell me please!!!

Answer 1

Responsive layout is basically just manipulating media queries to transform the size and position of elements based on screen width, pixel density, and so on. To study this technology, any layouts are suitable.
The feature is that there can be 2 options:
1. The designer thought of everything for you and drew the layout of the site himself in several popular resolutions (smartphone screen, tablet screen, full-size desktop). And you just need to competently make the transition from one state to another.
2. The designer drew only the desktop version and you need to adapt it for mobile devices. Fantasy and common sense work here. That's all.
Those. in fact, the only difference is whether the appearance was thought out for you or not. Otherwise, the layout of both types of layouts is no different.

Answer 2

Yes, Lord, you take any adaptive psd layout or any landing page and do whatever you want with it.
Search by request psd responsive templates.
Comrade Denis Ineshin correctly wrote:
Normal designers also draw for devices, but most often this is one desktop layout, but even looking at the layout once, you can determine whether you have to tear your ass to adapt it or whether it will go like clockwork.
In any case, if you search the web, you can find layouts for devices.

Answer 3

Go to the site of any responsive framework (bootstrap, zubr, skeleton, etc.) and see an example of the grid and its behavior on the site. Now you have clearly seen the behavior of the blocks and their sizes at different resolutions. Make a grid of guides in Photoshop and design/layout.