How to layout a responsive website?

Question

css

Hello. What tools and techniques are currently popular for adaptive layout? Share your approach to adaptive.
I don’t understand anything at all in this matter, therefore I want to hear advice from skilled people in order to step on the rake less when studying this issue. Thank you.

Answer 1

use media queries and no more witchcraft, understand media expressions, you can safely use Bootstrap or any framework, but still the best practice is media expressions

Answer 2

There are 2 approaches to adaptive layout:
mobile-first and desktop-first
Bearded developers with more experience recommend starting with mobile-first, because there are fewer bugs.
Personally, as a beginner in the frontend, it’s easier for me to start from the desktop, patamushta is clearer.
But, I heard such an interesting approach from one cool middle-frontender:
You create mobile first, while using only display-block elements (because in fact all elements in the mobile version are located one under the other, and this is achieved by block elements) then when you get to the tablet and desktop, you drag the elements around the page with css as the designer drew.
I tried this approach, and felt how +100 XP and 1lvl Up were added to me))
// I'm using SASS. Cool thing, it significantly speeds up the development process, and after making friends with mixins for fun, I even tried to make my own grid. Preprocessors are a very cool thing! I mastered Sass in a week in between work tasks))

Answer 3

Media expressions, as described by Sagan , and you can also start with bootstrap and
then flexbox look

Answer 4

Choose the framework of your choice. For example, 5 of the most famous https://geekbrains.ru/posts/5_css_frameworks are described here. You can google yourself for "responsive css frameworks".
I myself have been using bootstrap for many years, simply because it is wildly popular (at least in my world). But don't mind trying something else. Fortunately, the CSS framework is not rocket science and switching to something new is easy enough.