@KennySP

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

Интересует оптимальный способ написания медиа запросов css, не в плане выбора брейкпоинтов, а куда именно их записывать в документе.
Есть вариант в конце css файлика разделить экран на части (для ноутов, планшетов, мобилок и т.п.) Или после каждого правила css можно сразу писать стили для адаптива, через инклюды всякие. Или мб после каждого смыслового блока, сайдбара, например, прописывать стили.
По-разному пробовал, везде свои недостатки. В первом варианте приходится скроллить по всему css, а если для каждого правила отдельно прописывать по 4+ брекпоинта, очень большой файл css получается.
  • Вопрос задан
  • 888 просмотров
Пригласить эксперта
Ответы на вопрос 4
@its2easyy
На большом проекте и с препроцессором удобнее писать все медиазапросы прямо внутри css класса, и для каждого компонента (или группы компонентов, типа меню и пункта меню) делать отдельный файл, тогда при работе с компонентом все его стили будут в одном месте в одном файле.
Ответ написан
@zkrvndm
Боты, парсеры, расширения
Я сам обычно как делаю, сначала верстаю чисто ПК-версию сайта. Стили в файлах у меня разбиты на логический блоки и расскоментированы по мере верстки страницы сверху-вниз. Как только ПК версия готова, в самом низу комментариями выделаю отдельный логический блоки для адаптации уже под смартфоны, куда дописываю стили медизапросами.

То есть другими словами, если я пишу стили для какого-то блока, то нету такого, что адаптацию пишу там же рядом - вовсе нет, у меня адаптирующие стили для мобильной версии сайта всегда идут под конец css-файла и отдельно от всего, что выше. Так их удобнее редактировать и править на лету.
Ответ написан
@vladimirvaskovskiy
Изучаю Python
Обычные медиа-запросы в css прописываются так:
@media(размеры экрана устройства){
Здесь стили, которые требуется поменять
}

Пример:
@media (max-width: 1199px){
    .container{
        width: 960px;
    }
    .catalog{
        text-align: center;
    }
}
Ответ написан
@survivor2005
В отдельном файле не удобно, потом не понятно где что, понятнее всего в конце компонента, разбивайте вёрстку на компоненты, так будет понятнее всего, и код будет маленький и понятный, легко поддерживать. Тут тоже не без минусов, повторяющиеся код, но это оправдано.
Ответ написан
Ваш ответ на вопрос

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

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