Недавно взялся изучать HTML5/CSS3. В основах уже более-менее разобрался, так что решил приступить к практике и сделать адаптивный сайт. Думал, особых проблем не возникнет. Но как только начал детально вникать в специфику, столкнулся с множеством трудностей...
Как я понял, есть разные техники — "mobile first", "progressive enhancement", "graceful degradation", "flexible boxes" и т.д. Вот, собственно, не могу понять, что лучше использовать и для каких целей. Также, не понятно для чего нужна адаптивная сетка, Less/Haml, как подбирать шрифты, чтобы они хорошо смотрелись на разных разрешениях, как добиться кроссбраузерности в IE и т.п. — может есть какие-то уроки, где всё это систематизировано?
Привет, я думаю тебе стоит найти пару готовых дизайнов в формате psd и попробовать сверстать их, например с уклоном в mobile-first.
Сетка нужна для позиционирования, очевидно же. Используется для уже готовых брейкпоинтов.
Less/haml используется для ускорения кодинга и увеличения функционала того же css/html, например появляются переменные.
Ну и можешь почитать о Gulp.
Обычно понимание многих вещей приходит только с опытом.
Я обычно адаптирую сайты начиная с самого большого разрешения, постепенно сужая его до тех пор пока что-то не начинает ехать или смотреться криво, в этот момент создаю точку media queries, далее продолжает сужать экран и создавать новые media queries.
Средний
Простой