Why media request is not processed correctly?

Question

css

The html has this tag. The resolution of the device clearly does not fall within the specified range. Checked in web inspector. But for some reason the styles are still loaded on the site. It seemed to me that the styles should not be loaded if the media expression is not executed.

<link type="text/css" rel="stylesheet" href="/sites/default/files/css/css_JzJU2q_K9XiQApcqbkJg_PWAoZ8u0E_tlt9VuQ.css" media="only screen and (min-width: 768px) and (max-width: 1024px)">

Answer 1

Styles are always loaded, everything, no matter how many media queries.
To make them work, they need to be included after the main styles.

<link rel="stylesheet" href="main.css">
<link rel="stylesheet" href="media.css" media="only screen and (min-width: 768px) and (max-width: 1024px)">

If the media expression fails. So the basic styles work. When they reach the BreakPoint, they switch to styles from the media query. Provided that they are connected after the main ones. Otherwise, you will have to fence harmful !important