Как выбрать медиа запросы?

Question

[reddemand]

Получил 3 макета размерами 375, 768, 1500px. По декстоп-фёст подходу использую медиа запросы media (max-width: 767px) {} и media (max-width: 1499px). Смущает то, что экраны с разрешениями, например, 1366 отображают макет шириной 768px. Не хватает еще одного макета, или мой подход неправильный, или что-нибудь еще?

Comments

[Rustam Bainazarov]

Как минимум, не хватает нормального десктопа. Десктоп — это от 1200 пикселей в идеале, а так — от 1360.

Answer 1

[Арсений Матыцин]

1. Mobile first → (mIN-width: 767px) более рузумен. Скорее единственно подходящий подход.
2. 768 макета вполне хватает для покрытия большинства планшетных отрисовок вплоть до десктопа. Можно и 1024 вставить, как переходный, но в целом от него чаще проблемы.
3. Верхняя планка, ИМХО, задрана, для десктопа минимальный должен быть не менее 1366, иначе многие владельцы компухтеров получат верстку для планшета.

Comments

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

Только странные люди разрабатывают mobile first.

На телефоне допускается скрытия элементов не влияющих на основной функционал / посыл. Но не наоборот.

[Арсений Матыцин]

Ярослав Иванов, я лично предпочитаю использовать подход отсутствия конфликтов в стилях, т.е. без переопределения. Т.е. формирую описания без медиазапросов, который догоняю на разнице запросами сперва «от», а потом «до».

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

При этом ничего не мешает сокрытию элементов и других манипуляций на медиа запросах типа «до».

Что, я уверен, при такой постановке вопроса и приводит к тому, что «учись мобайлу», пока не начнешь осознавать достаточно, чтобы не писать такие вопросы).

[Арсений Матыцин]

Ярослав Иванов, и можем замутить мегоФАЙТ на эту тему)

Answer 2

[mahmudchon]

А основные элементы страницы, ширина текстовых блоков, общая ширина также может быть по дизайну 1500px? Если так - то кто-то рисовал лишь из соображений того, как будет удобно у него на широкой платформе.
Но, если все так, как я думаю - то, правила в media (min-width: 1200px) также будут работать и на 1300, 1400, 1600 и тп.

Answer 3

[Антон Литвиненко]

Ваши три макета не ограничивают вас в использовании медиазапросов. Мне часто приходят макеты от недодизайнеров где все красиво, скажем, на 1800. Так как их красота часто начинает ломаться на 1600 начинаем пилить запросы с 1600, изменяя размеры того, что нарисовано. Опять же, никто не заставляет делать фиксированную ширину на медиазапросах. Делайте ризину. Давайте элементам ширину в max-width.
Пысы. Тоже терпеть не могу мобил ферст, хотя работать с ним умею и иногда использую

Answer 4

[McBernar]

Я часто в своих макетах руководствуюсь не принятыми цифрами, а поведением тех или иных элементов при том или ином разрешении.

То есть, могу легко поставить для одного блока брейкпойнт на 620px и больше нигде этот пойнт не использовать. Просто потому что из-за контекста дизайна это именно та ширина, кода элемент нужно преобразовать.