@Denis_DM

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

Добрый день, подскажите, вопрос следующего плана, сайт под управлением 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) +7 999 693 08 69
*в любое время на связи=)
  • Вопрос задан
  • 625 просмотров
Решения вопроса 3
@vardoLP
Ват ю сэй эбаут май мама?!
потому что у вас не так написаны запросы, если вы хотите делать под конкретные разрешения, нужно писать так

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


и т.д.

ну и разрешения свои если надо подставляете
Ответ написан
PavelMonro
@PavelMonro
Сочитайте:
@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) {...}
Ответ написан
Ankhena
@Ankhena Куратор тега CSS
Нежно люблю верстку
Вот посмотрите на ваши интервалы (все как в школе ;) ).
В перекрывающихся интервалах побеждает то свойство, которое написано последним.
5bd2cd1f29a38847621645.png
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
shmatuan
@shmatuan
Vue, Node, RoR
и по какой причине могут перекрывать друг друга.

В этом собственно и смысл медиа запросов - подключать и ставить в большем приоритете стили под определённый размер экрана:
@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;
  }  
}
Ответ написан
@siarheisiarhei
дело не только в дурости media (min-width:) ....css = каскадная таблица... и, где вы видели в природе - одновременно в одном каскаде два противоположных потока... кому то садомазохизм в кайф....
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы