Как правильно прописывать media запросы?

Question

[KennySP]

Интересует оптимальный способ написания медиа запросов css, не в плане выбора брейкпоинтов, а куда именно их записывать в документе.
Есть вариант в конце css файлика разделить экран на части (для ноутов, планшетов, мобилок и т.п.) Или после каждого правила css можно сразу писать стили для адаптива, через инклюды всякие. Или мб после каждого смыслового блока, сайдбара, например, прописывать стили.
По-разному пробовал, везде свои недостатки. В первом варианте приходится скроллить по всему css, а если для каждого правила отдельно прописывать по 4+ брекпоинта, очень большой файл css получается.

Comments

[LolExtasy]

Думаю лучше писать внутри каждого правила, сразу понимаешь что и как. Начни использовать галп, там есть хороший пакет клик который за тебя отсортирует запросы по брейкпоинтам и в конце всей сборки запишет все в самом конце.

Answer 1

[its2easyy]

На большом проекте и с препроцессором удобнее писать все медиазапросы прямо внутри css класса, и для каждого компонента (или группы компонентов, типа меню и пункта меню) делать отдельный файл, тогда при работе с компонентом все его стили будут в одном месте в одном файле.

Answer 2

[zkrvndm]

Я сам обычно как делаю, сначала верстаю чисто ПК-версию сайта. Стили в файлах у меня разбиты на логический блоки и расскоментированы по мере верстки страницы сверху-вниз. Как только ПК версия готова, в самом низу комментариями выделаю отдельный логический блоки для адаптации уже под смартфоны, куда дописываю стили медизапросами.

То есть другими словами, если я пишу стили для какого-то блока, то нету такого, что адаптацию пишу там же рядом - вовсе нет, у меня адаптирующие стили для мобильной версии сайта всегда идут под конец css-файла и отдельно от всего, что выше. Так их удобнее редактировать и править на лету.

Answer 3

[survivor2005]

В отдельном файле не удобно, потом не понятно где что, понятнее всего в конце компонента, разбивайте вёрстку на компоненты, так будет понятнее всего, и код будет маленький и понятный, легко поддерживать. Тут тоже не без минусов, повторяющиеся код, но это оправдано.

Answer 4

[Vladimir Vaskovskiy]

Обычные медиа-запросы в css прописываются так:
@media(размеры экрана устройства){
Здесь стили, которые требуется поменять
}

Пример:

@media (max-width: 1199px){
    .container{
        width: 960px;
    }
    .catalog{
        text-align: center;
    }
}

Comments

[KennySP]

Я не про это спрашивал..