Why might CSS media queries not work under certain permissions?

Question

CMS

Good afternoon, tell me, the question is the following plan, a site running joomla, the template that I use involves the use of CSS media queries (initially, some permissions were registered in the template file). what is the actual problem. i added two new permissions

@media only screen and (min-width: 1360px) {...}
@media only screen and (max-width: 1920px) {...}
@media only screen and (max-width: 1280px) {...}

the first two permissions (1360 and 1920) work without problems, when I add 3 permissions (1280) it interrupts the first two and properties that are prescribed 1280 apply on all permissions, how can this be? and for what reason can overlap each other. I will be extremely grateful for the detailed answer. If there are those who understand adaptive layout and these CSS media queries, are ready to pay for a little consultation
, write to VK https://vk.com/melmi229
or whatsapp (telegram) [phone]
*at any time in touch = )

Answer 1

because your requests are not written that way, if you want to do it for specific permissions, you need to write like this

@media (min-width: 992px) and (max-width:1170px){
  
}
@media (min-width: 768px) and (max-width:991px){
  
}
@media (min-width: 480px) and (max-width:767px){
  
}

etc.
Well, if you need to substitute your permissions

Answer 2

and for what reason can overlap each other.

This is actually the meaning of media queries - to connect and prioritize styles for a certain screen size : is below in the code. With (min-width: 1360px) it's simple - when the screen size is < 1360px, this style is removed, because. min-width is applied as "for size greater than X" PS
In this form, you will have to rewrite all the changed elements for each segment each time, so consider this too. It will be better to combine just (max-width: 1280px) and segments (min-width: 780px) and (max-width: 1280px)

@media only screen and (max-width: 1280px) {
  .block {
    font-size: 14px;
    text-align: center;
    color: grey;
  }
}
@media only screen and (max-width: 992px) {
  .block {
     font-size: 12px;
  }
}

VS

@media (min-width: 992px) and (max-width:1280px)
{
  .block {
    font-size: 14px;
    text-align: center;
    color: grey;
  }
  
}
@media (min-width: 768px) and (max-width:991px)
{
  .block {
    font-size: 12px;
    text-align: center;
    color: grey;
  }  
}

Answer 3

it's not just the stupidity of media (min-width:) ....css = cascading table... and, where you saw in nature - two opposite streams in one cascade at the same time... sadomasochism is a thrill for someone....