How to do responsive layout?

Question

Layout

Hello fronts! I have a problem with responsive layout.
I use the most familiar method, I think it's not the only one, adaptive layout by narrowing the browser window, I look at the width in the upper right corner, through media queries I adjust all the elements to the desired size and it would seem that everything is fine, but somehow I decided to look at my adaptive through different devices (phone, tablet, ipad), I'm talking about the menu in which there are artificial these devices. After viewing, I see that some elements of the page look completely different than when viewed through a normal window narrowing, and I simply don’t know which layout option is correct. Even when I look through artificial devices, the percentage separation in the browser is automatically adjusted for me, when I look through the automatic one, I can calmly scroll the page down to the footer, when I set the distance to 100%, not only to the footer,

Question: how to make it right? through narrowing the browser window with a standard zoom (100%) or through artificial devices, with automatic zoom that adjusts the browser

Answer 1

Useful guide

Answer 2

Responsive Layout Grid & Flex
Check out this course there is a lot of interesting stuff on responsive layout.
Here they posted on the Pinta IT channel with a Video course Layout from Figma Adaptive Layout on the channel has already laid out the base for ideal, classic and advanced layout using Grid & Flex, there are also many Figma layouts for learning layout.