Задать вопрос
AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

Правильное использование media queries?

Давно верстаю методом mobile first. Но недавно все больше склоняюсь к desktop first.
Почему?

Какой из вариантов эффективен для меньшего веса css так как цель мобайл first это минимум строк кода css. Ваше мнение господа?

Вариант 1:
.navigation {
        display: none;

        @include media-breakpoint-up(lg) {
            display: flex;
			align-items: center;
			border-top: 1px solid #ccc;
            background-color: #353535;
        }
    }


Вариант 2:
.navigation {
		display: flex;
		align-items: center;
		border-top: 1px solid #ccc;
		background-color: #353535;

        @include media-breakpoint-down(md) {
			display: none;
        }
    }
  • Вопрос задан
  • 72 просмотра
Подписаться 1 Простой 2 комментария
Пригласить эксперта
Ответы на вопрос 2
@Andrew-Bogdanov
На своей практике пришел к выводу что все определяет конкретный дизайн. Далеко не всегда дизайнеры рисуют полноценный mobile first. Чем меньше кода и чем он проще - тем и лучше, помоему это главный критерий. Посмотрите как sass хелперы медиазапросов реализованы в том же 4м бутстрапе, они могут идти как от меньшего к большему, так и наоборот.
В примере выше вообще без разницы.
Ответ написан
Комментировать
@VazgXa
HTML верстальщик / Frontend разработчик
Поддерживаю Андрею. А еще добавлю что если хотите прям меньше кода - тогда одновременно нужно и mobile first и desktop first, потому что почти всегда весь макет не напишешь на одном из них. Будет блок где получиться меньше кода по desktop first а будет блок-наоборот. Я раз пробовал одновременно использовать обо, и перестал так делать, очень много заморочек из за каких то Кбайт.
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Похожие вопросы