How does the browser handle these styles in this case?

Question

css

There are styles

.title {
  color: red;
  height: 30px;
}

@media screen and (max-width: 1000px) {
  .title {
    display: none;
  }
}

If a client comes in with a <= 1000px resolution, will the browser first apply the color and height styles and then hide the box, or will it realize that it will overlap display: noneand not apply the other styles?
The same goes for style overrides:

.title {
  color: red;
  height: 30px;
}

@media screen and (max-width: 1000px) {
  .title {
    height: 60px;
  }
}

The browser will first set the height to 30, and then 60, thereby causing two reflows?
That is, it would be much better to use also@media min-width?

Answer 1

Long answer:
https://developer.mozilla.org/en/docs/Web/Performa...
Short answer:
For each node, it will find the corresponding rules and apply the highest priority. In this case, from the media. But this wording "first one thing then the other" is meaningless. The file itself is read sequentially, not all lines at the same time.

The browser will first set the height to 30, and then 60, thereby causing two reflows?

Reflow is when the page has already been rendered. On the initial rendering, this, in theory, will happen in the first case when building the render tree (title will not fall into it, since display: none), in the second, when composing. But in both cases, before the initial rendering.

That is, it would be much better to use media min-width as well?

Why deliberately make the style tree heavier?