0

Пишу адаптив в css без js, получается, что медиа-запрос находится в конце кода и, когда я задаю новый параметр классу в медиа-запросе, параметр меняется на всех брейкпоинтах. то есть когда меняю display с block на inline-block в определенном классе, происходит смена на i-b во всех брейкпоинтах+перекрывает основной код

6
  • Что вас удивляет? Так и должно быть. Это css. Можно использовать !important для свойств которые вы не хотите менять, но лучше писать код так, чтобы не пришло это применять. 26 июл 2016 в 17:43
  • а если я из css перейду в scss - это изменит ситуацию? спасибо! 26 июл 2016 в 18:19
  • Это не другой язык, это постпроцессор. Не знаю, умеет ли он менять области применения, но если да, то это значит, что он просто отменяет ваши измененные стили ниже по тексту скомпилированного css. 26 июл 2016 в 18:21
  • 2
    Не должно быть такого. Либо вы не полностью описали проблему и вас не правильно поняли, либо не правильно пишете медиа-запросы. Приведите пример.
    – user31906
    26 июл 2016 в 18:23
  • согласен. перечитал вопрос, какая-то ерунда. может быть это среда разработки пакостит? некоторые редакторы типа sublime умеют такое. 26 июл 2016 в 18:48

1 ответ 1

1

Вот вам пример правильных медиа запросов, правда не под все разрешения, нужные разрешения допишите сами. Разрешения в данных медиа запросах взяты из сетки бутстрап. Основные стили вы пишете в в файле style.css стили же для медиа запросов пишите в файл media.css. Медиа запросы на то и медиа запросы чтобы перебивать ваши основные стили когда размер экрана на вашем устройстве изменяется на соответсвующее разрешение в медиа запросах.

/*==========  Desktop First Method  ==========*/

/* Large Devices, Wide Screens */
@media only screen and (max-width : 1199px) {

}

/* Medium Devices, Desktops */
@media only screen and (max-width : 991px) {

}

/* Medium Devices, Desktops */
@media only screen and (min-width : 992px) {

}

/* Large Devices, Wide Screens */
@media only screen and (min-width : 1200px) {

}

К примеру в основном файле стилей у вас div-у с классом class применяется стиль:

.class {
    display: block;
}

Этот стиль будет действовать для всех тегов с классом class до тех пор пока при смене разрешения браузер не встретит в медиа запросах другой стиль для конкретного разрешения, допустим так:

@media only screen and (min-width : 992px) {
    .class {
        display: inline-block;
    }
}

исходя из медиа запросов всем тегам с классом class присвоится display: inline-block; начиная с разрешения 992px, на разрешениях же ниже 992px будет действовать ваш основной стиль. Для того чтобы стили начинали действовать до определенного разрешения нужно писать их не в @media (min-width), а в @media (max-width).

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.