Почему @screen xl и @screen lg переопределяются @screen md в попутном ветре css? - PullRequest
Новая
       69

Почему @screen xl и @screen lg переопределяются @screen md в попутном ветре css?

1 голос
/ 31 января 2020

Я расширил свойства попутного ветра margin в файле конфигурации: 

module.exports = {
    theme: {
        extend: {
            'margin': {
                '1/5': '20%',
                '1/4': '25%',
                '1/3': '33.333333%'
            }
        }
    },
    variants: {
        margin: ['responsive']
    },
    plugins: []
}

И затем применил его в моем css со следующим: 

@screen xl {
    .content-section.contract {
        @apply ml-1/5;
    }
}

@screen lg {
    .content-section.contract {
        @apply ml-1/4;
    }
}

@screen md {
    .content-section.contract {
        @apply ml-1/3;
    }
}

Но вместо получения margin-left: 20% на очень больших экранах и margin-left: 25% на больших экранах, стили переопределяются значением для средних экранов.

enter image description here

Я попытался добавить !important в каждом стиле на разных размерах экрана, но это не работает, как я ожидал. Я полагаю, что это не может быть воспроизведено в скрипке, поскольку утилиты настройки не поддерживаются в CDN-версии попутного ветра css.

1 Ответ

0 голосов
/ 31 января 2020

Согласно изображению, порядок запросов отвечает за это поведение.

Это потому, что всякий раз, когда множественное правило css с одинаковым приоритетом применяется к элементу, который выигрывает последний.

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

Основное правило - сортировать запросы от наименьшего к наибольшему при использовании min-width (сначала мобильный) , При использовании max-width (сначала рабочий стол) все наоборот.

Решение здесь состоит в том, чтобы либо использовать max-width вместо min-width, либо изменить порядок запросов, поэтому наименьший экран идет первым, а самый большой последним.

Пример (в обратном порядке): 

@screen md {
    .content-section.contract {
        @apply ml-1/3;
    }
}

@screen lg {
    .content-section.contract {
        @apply ml-1/4;
    }
}

@screen xl {
    .content-section.contract {
        @apply ml-1/5;
    }
}
...