Класс CSS внутри медиа-запроса не применяется - PullRequest
Новая
       8

Класс CSS внутри медиа-запроса не применяется

1 голос
/ 30 сентября 2019

В настоящее время я пытаюсь сделать сайт более отзывчивым, и это с помощью медиа-запросов. Тем не менее, по какой-то причине я не могу заставить мои классы вообще применяться в моих медиа-запросах (или, по крайней мере, так это выглядит?).

Я не уверен, что делаю что-то не так, что-то упускаю из виду или это просто знак того, что мне следует сделать перерыв. В любом случае CSS выглядит следующим образом: 

@media (max-width: 760px) {
    font-size: 56px;

    :not(.aboutUs_extra_margin) {
      margin-top: 190px !important;
    }
}

1 Ответ

2 голосов
/ 30 сентября 2019

Я полагаю, что вам не хватает класса, который должен обернуть стиль. Стиль будет применен к классу, который вы обернули вокруг стиля. Ваш код должен выглядеть следующим образом: 

@media (max-width: 760px) {
    .className{
        font-size: 56px;
    }

    :not(.aboutUs_extra_margin) {
         margin-top: 190px !important;
    }
}

Если вы хотите, чтобы все ваши классы применяли этот стиль, вы можете вместо этого добавить тело. Тело является родительским элементом всех классов. 

@media (max-width: 760px) {
    body{
        font-size: 56px;
    }   
    :not(.aboutUs_extra_margin) {
         margin-top: 190px !important;
    }
}

Обновление:

Основываясь на комментариях ниже, я сделал скрипку, содержащую медиазапросы. Один внутри родительского элемента, а другой за его пределами.

https://jsfiddle.net/rhbsqj6z/4/

Единственный стиль, который применяется, заключается в следующем коде: 

@media (max-width: 760px) {
    body{
        background:green;
    }   
    :not(.aboutUs_extra_margin) {
         border:1px solid red;
    }
}

Пока вы ожидаетеприменить стиль под ним, так как CSS смотрит на последний определенный стиль. Также, если вы закомментируете первый медиазапрос, вы увидите, что приведенный ниже не будет работать: 

.parent{
@media (max-width: 760px) {
    body{
        background:red;
    }   
    :not(.aboutUs_extra_margin) {
       border:1px solid blue;
    }
}

Медиазапросы внутри родительского класса не работают.

...