How to typeset using "pixel perfect" and "mobile first" approaches at the same time?

Question

css

Actually the question is in the title. For the first time I took up "pixel perfect" layout. I started to typeset on bootstrap, and after I did everything ideally on the big screen, it was time to make adaptability and then I stalled.
As a result, through a bunch of crutches, I did everything - but I understand that I did it wrong, and I would not accept such a job.
Made in sass. As a result, I got the following sass structure:
_min-1200.scss
@media (min-width: 1200px) { основные стили }
_min-992.scss

@media (min-width: 992px) { копия всех стилей с мелкими изменениями }

_min-768.scss

@media (min-width: 768px) { копия всех стилей с мелкими изменениями }

_max-768.scss

@media (max-width: 768px) { копия всех стилей с мелкими изменениями }

Answer 1

No way.
pixel perfect is a myth.
It is not achievable in principle, due to the peculiarities of text rendering by different browsers on different axes.

Answer 2

Started to typeset on bootstrap

It is needed for layout, not for normal layout.
You basically don't have Mobile First. Read about inheritance in CSS.

Answer 3

It can be difficult to make a mobile-first layout, because there is no design for that same mobile, or you don’t know at all what the adaptive will need to do ...
In this case, in the finished desktop layout, I “clean” everything from the markup for the desktop, wrap the indents and sizes where specified in min-width: (~width of the layout) and start laying out everything for 0+, setting the width in the browser to 320. then for ~ 600+ (large phones and tablets) - this often requires very few edits. And in general I can’t stand styles anywhere in separate files, all in one class, that is

.my-class {
  color: red;
  @media (min-width: 600px) {
    color: green;
  }
  @media (min-width: 1200px) {
    color: black;
  }
}

So you don’t have to duplicate, everything will be in one place, styles for all permissions will be visible in the code.
Don't get too carried away with pixel-perfect, many designers place indents at random. Just make sure it matches .

Answer 4

Normal structure, except that the bootstrap often does not need to create some intermediate breakpoints if you use the built-in grid and helper classes.
Do pixel perfect only for those versions of the layout that are presented to you. If you have layouts for both mobile and full-screen versions, you will have to work hard, and if not, then you should not bother.