kiselev-webmaster
@kiselev-webmaster

Не работает scss миксин адаптивной верстки в сборщике webpack?

Приветствую. Собираю проект с помощью этого конфига сборщика: https://tocode.ru/curses/nastroika-webpack4 . Для удобства адаптивной верстки написал scss миксин:
$breakpoints: (
    "phone":        400px,
    "phone-wide":   480px,
    "phablet":      560px,
    "tablet-small": 640px,
    "tablet":       768px,
    "tablet-wide":  1024px,
    "desktop":      1248px,
    "desktop-wide": 1440px
);
@mixin mq($width, $type: max) {
    @if map_has_key($breakpoints, $width) {
        $width: map_get($breakpoints, $width);
        @if $type == max {
            $width: $width - 1px;
        }
        @media (#{$type}-width: $width) {
            @content;
        }
    }
}


Соответственно верстая адптив пишу:
header.desktop{
    display: block;
    @include mq('phone') {
        display: none;  
    }
}


После сборки в стилях все ок, media прописываются в самом конце, группируются, но почему-то медиа запросы не работают. т.е конкретно из примера в моб.версии селектор header.desktop не скрывается. Почему не могу понять.. помогите разобраться.

Проект со сборщиком лежит на гитхабе: https://github.com/kiselev-webmaster/pion
  • Вопрос задан
  • 62 просмотра
Решения вопроса 1
@cheeroque
Само собой не работает, где meta viewport?

<meta name="viewport" content="width=device-width, initial-scale=1.0">
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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