What measurement measures to use in adaptive layout?

Question

css

I just can't figure out what measurement measures to use in adaptive layout and where.
For example, for the font size, I use rem, and when setting the width of the blocks, I use percentages where it is convenient. How to set paddings and margins? Is it possible to use pixels or is it a taboo in the adaptive and also prescribe everywhere through rem? In different video tutorials, they do it differently and this misleads me) Help me out, clarify the situation)
And more about media queries. I usually start with a standard size and narrow the width of the window, as soon as something moves I write a media query to fix it. The result is a lot of different requests, but looks good at any size. Is it usually done one way or another?

Answer 1

1. It all depends on the layouts implemented for different viewport sizes and the designer's comments. In some blocks, the indents may depend on the font size, in some - on the width of the block, and somewhere remain stationary. 2. Using rem
as the size unit , you ignore the possibility of inheriting from the parent. In this case, the cascade is calculated exactly the same, and you do not get an increase in the speed of building CSSOM. Here's a simple example - there are 2 elements in the block, the font size for the first should be 2 times larger than the second, for which the font size should be 1.5 times larger than that of the parent. HTML

<div class="sample">
  <div class="sample-one">Text</div>
  <div class="sample-two">Text</div>
</div>

.sample-one {
  font-size: 3em;
}
.sample-two {
  font-size: 1.5em;
}

By changing the size of the parent block, I always get the desired result. And, in case of binding to rem , I will be forced to change the size in 3 elements. And if there are 10 such investments?
3. All media queries work on the if principle . Each will be checked for compliance and, in case of a positive result, the rules described in the block are applied, taking into account specificity and order .

Answer 2

Either em or percentages. And don't forget about the calc function in CSS, it helps a lot to calculate sizes.