Почему могут не работать CSS медиа запросы под определенные разрешения?

Question

[Denis_DM]

Добрый день, подскажите, вопрос следующего плана, сайт под управлением joomla, шаблон который я использую предполагает использование CSS медиа запросов (изначально в файле template были прописаны некоторые разрешения). в чем собственно проблема. я добавил два новых разрешения

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

первые два разрешения (1360 и 1920) работают без проблем, когда добавляю 3 разрешение (1280) оно перебивает первые два и на всех разрешениях действуют свойства которые прописанные 1280, как такое может быть? и по какой причине могут перекрывать друг друга. буду чрезмерно благодарен за подробный ответ. Если есть те, кто разбирается в адаптивоной верстке и этих CSS медиа запросах, готов заплатить за небольшую консультацию
пишите в вк https://vk.com/melmi229
или whatsapp (telegram) [phone]
*в любое время на связи=)

Comments

[Андрей Гончаров]

Если, отметая прочее, проблема именно в том что "на всех разрешениях действуют свойства которые прописанные 1280", то у вас синтаксическая ошибка где-то в коде. Остальное в комментах верно.

Answer 1

[Юпитер Макс]

потому что у вас не так написаны запросы, если вы хотите делать под конкретные разрешения, нужно писать так

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

и т.д.

ну и разрешения свои если надо подставляете

Answer 2

[Павел]

Сочитайте:

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

Answer 3

[Ankhena]

Вот посмотрите на ваши интервалы (все как в школе ;) ).
В перекрывающихся интервалах побеждает то свойство, которое написано последним.

Answer 4

[shmatuan]

и по какой причине могут перекрывать друг друга.

В этом собственно и смысл медиа запросов - подключать и ставить в большем приоритете стили под определённый размер экрана:
@media only screen and (max-width: 1280px) {...}Заменит стили при экране <= 1280px (и равносильных селекторах ) предыдущий (max-width: 1920px), т.к. стоит ниже в коде.

С (min-width: 1360px) всё просто - при размере экрана < 1360px этот стиль убирается, т.к. min-width применяется как "для размера больше чем Х"

P.S.

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

В таком виде придётся переписывать каждый раз все изменённые елементы для каждого отрезка, так что учитывайте это тоже. Лучше будет совмещать просто (max-width: 1280px) и отрезки (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 5

[siarheisiarhei]

дело не только в дурости media (min-width:) ....css = каскадная таблица... и, где вы видели в природе - одновременно в одном каскаде два противоположных потока... кому то садомазохизм в кайф....

Comments

[Ankhena]

где вы видели в природе - одновременно в одном каскаде два противоположных потока

Дизайнеры бывают разные ;) Некоторые из них те еще затейники.

[siarheisiarhei]

дизайнер и массовик затейник - ну разное это.... Просто, Мы! - сами инженера и фигляра сравняли...

[Alekxandr]

siarheisiarhei, Есть люди умные, а есть тупые "умники"