web-standards-ru
Фикс шапки при масштабировании и разрешении 735px
В остальном — спасибо :) И жаль, что приходится менять принцип вёрстки из-за такого бага. Проверю локально и посмотрим, насколько хорошо получилось.
Убрал лишние.
Почему это считается другим принципом верстки, в проекте же Mobile-first и это больше похоже на него?
Почему это считается другим принципом верстки, в проекте же
Mobile-firstи это больше похоже на него?
В проекте скорее используется подход Generic First (Common First), когда пишутся общие стили для всех экранов, а затем меняются состояния при помощи min-width и max-width.
Тут объясняется суть подхода:
- Адаптивная шапка с выпадающим меню на гридах, часть 1
- Адаптивная шапка с выпадающим меню на гридах, часть 2
- Alastair Hodgson. Generic First CSS: New Thinking On Mobile First
- Elad Shechter. The New Responsive Design Evolution.Responsive Design, You Got It All Wrong!
- Ahmad Shadeed. The State Of Mobile First and Desktop First
Возможно, стоит просто заменить (max-width: 735px) на (not all and (min-width: 736px)). Последнее работает как "отрицание" первого.
Generic First (Common First)
Ого, я не знал, что у этого подхода есть название :)
Возможно, стоит просто заменить (max-width: 735px) на (not all and (min-width: 736px)). Последнее работает как "отрицание" первого.
Проверил - вроде работает
Ещё предлагаю проверить такой вариант. В Bootstrap решали подобную проблему с использованием дробных значений, например, (max-width: 599.98px) там, где нужно было (max-width: 599px).
Но чтобы этот хак был чуть красивее, можно использовать calc - (max-width: calc(736px - 0.02px)). Calc работает во всех современных браузерах.