Много @media в css?

Question

[Артём Антипин]

Много media - признак неопытного верстальщика или это нормально?

Comments

[Ярослав Иванов]

Подобные вопросы не нормально.

[Сергей delphinpro]

ни одного медиа — признак неопытного верстальщика

[Сергей Горячев]

Сергей, четко)))

Answer 1

[Nikita Velko]

Вообще непонятно, с чего вы и комментаторы этого вопроса решили, что медиа-запросов должно быть какое-то определенное количество.
Если мы говорим про брейкпоинты, то основных обычно делают 3-5. Например, в сетке бутстрапа их пять:

Опять же, нет какой-то истины в последней инстанции, что N медиа-запросов это хорошо, а N + M — плохо.
Используйте ровно столько, сколько требует дизайн.
Если боитесь, что ваш итоговый css файл станет слишком большим, используйте сборщики для сжатия и оптимизации. Используйте плагины типа csso. В конце концов, используйте gzip сжатие.

Comments

[Сергей Горячев]

Вооот! Выразил мою мысль более правильно! Согласен.

Answer 2

[Сергей Горячев]

Слишком много "но", чтобы ответить точно.
Если используется для корректного отображения на всех экранах, начиная от smart watch до домашнего кинотеатра, то вполне себе хорошая практика, даже наоборот показывает профессионализм.
А если всё сделано через float, а media-запросами перестраивается, просто потому, что верстальщик не умеет правильно продумывать структуру сайта, чтобы использовать минимум кода, то это плохо.
У меня например, сетка с медиа-запросами состоит из разметки в 100 пикселей за шаг, начиная от 2000 и заканчивая 200.
Да, пишутся стили не всегда под все шаги, но иногда использование запросами под разрешение 1600 пикселей или под 1100 пикселей помогает намного больше перестроить корректно элементы.
В любом случае, ответить однозначно нельзя, не видя кода.

Answer 3

[Дмитрий Кузнецов]

Смотря сколько их. Если примерно 4-5, то это нормально. А если больше 10, то точно плохо.

Comments

[Сергей Горячев]

И с чего же это плохо?
Да, код немного побольше, но зато красивое перестроение, лишние 100-200 кб (грубо говоря) в современных реалиях) погоды не делают.

[Дмитрий Кузнецов]

Сергей Горячев,
1. Поверьте, если файл стилей и так около мегабайта, а тут ещё 100+ строчек кода добавляется, то это плохо.
2. Зачем делать множество условий, если сделать несколько и отображать сайт так, как вам нужно (в пример взять даже css фреймворки)?

[Сергей Горячев]

Дмитрий Кузнецов, фреймворки - это инструмент для ленивых разработчиков, а никак не пособие для верстальщиков. Да, несомненно это удобно, но далеко не всегда задумка дизайнера корректно вписывается в сетку, и просто капец как часто не хватает 20-30 пикселей, и блоки начинают разъезжаться. А меняя стили "как тебе нравится" (не зацикливаясь на разметке фреймворка - получаешь гибкий и удобный инструментарий.

[Сергей Горячев]

Дмитрий Кузнецов, Проще говоря. У меня есть два телефона, в одном разрешение 320х640, в другом 480х960. Шаги в 100 пикселей мне помогут сделать для них разный дизайн. Если к примеру, у меня на сайте логотип в ширину 200 пикселей. И номер телефона 200 пикселей. На первом разрешении это не уместится, скроем телефон, но на 2 телефоне влезет, так почему я должен отталкиваться от разметки фреймворка? Телефон в шапке полезная информация, если уж не влезло, то не влезло, но если можно уместить, лучше уместить.

[Сергей delphinpro]

Дмитрий Кузнецов,

Поверьте, если файл стилей и так около мегабайта

... то его нужно разделить на части.

[Дмитрий Кузнецов]

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

[Сергей Горячев]

Дмитрий Кузнецов, Как раз я делаю не только под свои телефоны, а под большинство современных девайсов. Если блок влез на определенную ширину экрана, он влезет на всех. А если нет, то нет. И таким образом не нужно отталкиваться от "общего" "мобильник, планшет, ноутбук, компьютер".

[Дмитрий Кузнецов]

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

Answer 4

[Егор Живагин]

Чего именно много?
Если много разрешений в media (5-6+), то это, скорее всего, плохо.
Если много кода в media - нормально, бывает. Хотя, тоже надо смотреть сами стили.

Comments

[Сергей Горячев]

Аналогичный вопрос к вам) Чем же плохо иметь 10+ шагов в медиа-запросах?)

[Сергей delphinpro]

Сергей Горячев, присоединяюсь к вопросу )

[Егор Живагин]

Сергей Горячев, хех. Мне, например, не особенно удобно такое поддерживать.

Но это субъективно. Объективно - такой подход должен быть оправдан. Не много сайтов со сложным дизайном настолько, чтобы потребовалось переписывать стили на каждые 100-200 px . В большинстве случаев, можно добиться того же эффекта используя 4-5 шагов. В большинстве, но не во всех.

[Сергей Горячев]

Егор Живагин, Я выше описал конкретный случай, где использование сетки в 100-200 пикселей сыграет большую роль. В ответе Дмитрий Кузнецов .

[Егор Живагин]

Сергей Горячев, собственно, в моём ответе специально есть

скорее всего, плохо

[Сергей Горячев]

Егор Живагин, Лисицин тебе фамилия) Хитришь)

[Егор Живагин]

Сергей Горячев, хороший пример, но опять же, от конкретного дизайна зависит. Можно ведь не скрывать телефон, а перенести его ниже логотипа )

[Сергей Горячев]

Егор Живагин, я просто соглашусь, что всё зависит от дизайна. Но правку про перенос под логотип впишу) А если шапка плавающая? Прикинь на полэкрана будет плавать логотип и под ним еще телефон))) Это абстрактно, просто для дополнения примера)

[Егор Живагин]

Сергей Горячев, а это, опять таки, вопрос конкретного дизайна)) Некоторый сайты в меню номера вставляют, а из плавающей шапки убирают. Т.е. номер остаётся вверху страницы (и в меню, которое плавает вместе с шапкой)

[Милок Мурлыка]

Сергей Горячев,

Я выше описал конкретный случай, где использование сетки в 100-200 пикселей сыграет большую роль.

На мобильных телефонах шаг в 100px нормально. А дальше чем больше мониторы, тем шире шаг

[Сергей Горячев]

Милок Мурлыка, у меня готовая сетка с шагом в 100 пикселей. Конечно половина не использутся вообще. Самые популярные у меня 300, 400, 500, 600, 800, 1000, 1200, 1400, 1600, 1900, 2200, 2600 и выше.
Но иногда бывает так, что нужно что-то прописать на 900 или 1100. Поэтому шаг в 100 для меня нормально в работе, все равно при сборке удаляются неиспользуемые.

[Милок Мурлыка]

Сергей Горячев, я это уже видел в переписке, и только сейчас вкурил. У вас реально сетка? Как у бутстрапа с колонками? Или просто набор брейкпоинтов?
Если сетка, сколько она весит? о_О

[Сергей Горячев]

Милок Мурлыка, сетка своя, но сетка сделана на подобие бутстраповской, с разделением на девайсы (телефон, планшет, ноутбук, компьютер). Так что часть прописана в сетке, а часть просто брейкпоинтами. Весит она мало, не минифицированная 100кб.

Answer 5

[Александр Гонтарев]

нет, это нормально