Adaptive layout - how to overcome the pain?

Question

css

Hello!
When the principle of adaptive layout appeared for me, it turned out to be a nightmare from which I still can’t recover, it’s such a pain - after all, for each resolution, you practically need to flip the layout, write new code, it turns out a lot of code that is more difficult to maintain. We will understand this pain under the name "code entropy"
Recently, I was given the task of laying out the layout of a mobile application, and I decided to finally try to overcome this pain, make it beautiful and concise - use rem. This seemed like the simplest solution to me, 100% of mobile browsers support this unit. The bottom line is that we write several lines of media queries for the html tag, indicating only the basic font sizes in pixels, in proportion to how our layout should look in different resolutions, and we type the rest of the layout without media queries as usual, only instead of pixels we use rem. This technique easily scales and adjusts the layout depending on the base font size.
The minimization of code and the ease of adaptive layout in this way is simply colossal!
There was the only disadvantage of this method: it was necessary to constantly recalculate the pixels of the psd layout into rem, but I quickly solved this problem - I wrote a special function and typeset as before in pixels, the preprocessor itself converted to rem.
But! The main joke is that I used this technique to create an adaptive mobile application, where the design was the same.
When I returned to adapting for regular sites , the pain returned to me even more forcefully than before, because as a rule we have from 3 to 6 different designs:
1) Large desktop 1600-1920 pixels
2) Small desktop / laptop ~ 1100-1400 pixels
3) Old monitor / tablet - 768-1024 pixels
4) Under-tablet / overgrown smartphone ~ 600 pixels
5) Smartphone 300-480
6) Old smartphone 250 pixels.
Of course, I exaggerated, but at least three layouts need to be done for sure.
So here is the question number 1 and the most important: how to minimize adaptive layout and make the code beautiful? How to reduce the so-called. code entropy? Is there any cool approach/method?
I looked at different sites of cool web studios in order to find the answer there and saw that everyone typeset at random, that is, without bothering at all.
The only thing I saw is that for some reason some people use em and percentages for fonts instead of the usual pixels. It seems like for scaling the text, although it is not clear how this reduces the code for adapting, in my opinion it only complicates everything - you need to make calculations depending on the font size of the parent block and even preprocessors most likely will not help ... I don’t know why you need to take a steam bath setting the font sizes to em units , troubles with rem still didn't go anywhere... Maybe I'm a bad layout designer... By the way, the most stubborn of those sites used em for margin and other box-size properties...
Question #2:
What's the point of using em?
And immediately question number 3:
Is there really no single methodology, is it really so bad in layout that everyone wants to do it the way they want and .... cheat? Or have I seen bad examples (although I searched among top themeforest themes and top web studio sites)?
Thank you!

Answer 1

Foundation / Bootstrap + SASS / LESS and there is no pain, it's a pleasure to make up adaptive sites.

Answer 2

I don't want to be a CEP, but all layout problems start with design. Responsive layout can only be in adaptive design, otherwise these are already three layouts, and not adaptability. With a good approach to design, in fact, you only have to make up the mobile version - the rest are deployed from this little bit not automatically.

Answer 3

I focus more on the back-end, sometimes I write in javascript / jquery, but when it comes to layout, a stupor begins.
And then I found Bootstrap for myself. The stupor has passed ...
If there are not enough standard components, you can find more advanced ones on the Internet.

Answer 4

I use pixels and don't worry.
I conditionally divide the style into several parts (depending on the screens).
The first (above) part is the most important. It sets all the styles for the site
The second part for tablets (for example) only overloads the properties that need to be changed using media. Code repetition is minimal

Answer 5

gulp+slim+sass
as code editor and psd cutter - brackets with extract

Answer 6

bootstrap solves many problems of adaptive layout, but I recommend that you simply reduce the number of blocks and simplify the structure for phones or old tablets, that is, the logo, menu, list of materials and footer, roughly speaking without any goodies, here you have a mobile one to steam over do not
otherwise you will never finish the layout of the site

Answer 7

www.adobe.com/ru/products/dreamweaver.html

Answer 8

And that no one uses pt?

Answer 9

really enjoyed using vw. first adjusted the font, padding, image sizes through perfectPixel Chrome. and everything seems to be ok on the burial grounds, but for tablets and so on, I rewrite the values ​​​​through the media to the px familiar to me

Answer 10

I think it’s worth starting with adaptive design and layout (and design) of basic elements (write styles), then from this, as from a constructor, make up a product. Of course, with the help of some other less. In this way, you can do very complex and flexible things.

Answer 11

your first impression of adaptive layout is unsuccessful, I like to adapt at least from 2300 to 320 px in width and my nerves do not burn

Answer 12

The methodology that relieves pain is called "Mobile First". Bootstrap uses it too.
The essence is short: the mobile layout usually looks the simplest, there is one column, a minimum of decor → we make it up first. At this stage, styles for text, backgrounds, colors, some basic indents will appear in css.
On larger screens, the layout becomes more complex, columns appear, and so on. With the help of media queries, we add layout styles to the mobile version, redefine already written styles, if necessary (for example, the font size has increased). Base styles are inherited from already written code.
And so for each component, starting from the small screen and ending with the largest one, we “refine” the layout until everything is as in the design.
I once made a codecast using this methodologycssdeck.com/labs/adaptive-tabs
Press the play button to watch the coding process.
If the code is not visible, go in incognito mode (without adblock).

Answer 13

I use bootstrap 4 files for high resolutions, 1600px (HD+), 1920px (Full HD), 2560px (Retina 1440p), 2880px (15" Retina), 3840px (UHD), 4096px (4K), 8192px (8K).
Files freely available Bootstrap 4 Grid for large screen resolutions