Какой подход к написанию медиа запросов для адаптации сайта правильный?
Какой подход к написанию медиа запросов для адаптации сайта правильный?
К примеру, у нас есть страница сайта, ее нужно адаптировать. С 1920 до 1366, допустим, она адаптируется без медиазапросов, благодаря гибкой сетке.
Далее блоки начинают выпадать и тут начинается самое интересное (нет)
Если подход не mobile first и создавать точки на разрешения под конкретные устройства (например, взяв из отладчика хрома) - 1440, 1024, 768 и т.д. - сайт может разваливаться (не совсем то слово, скорее блоки просто вылезут за границы контейнеров или сожмутся как эндоскелет первого терминатора) МЕЖДУ ними, т.е. дошли до 1440, сделали адаптацию на 1440, а между 1440 и 1024 может твориться кромешный ад.
Если использовать подход "берем страницу, уменьшаем, прописываем точки там, где непорядок" - получается излишне громоздко и трудоемко, особенно учитывая факт, что дизайна для мобильных устройств нет, дизайн изначально не особо учитывал мобильные устройства и перестройку блоков и сделан по принципу "засунь все это в нужное разрешение" .
В последнее время приходит мысль если не верстки mobile first (т.к. просто никто не станет рисовать мобильную версию), то начать адаптацию сайта с низких разрешений, т.е. не постепенно уменьшать страницу, а сразу поставить минимальное разрешение и начать писать медиазапросы от него и вверх.
Возьмите за основу точки перехода, как в бутстрапе, если не знаете, какие брать.
Ну, и, да, делать надо с нижней границы, т.е. делаете медиа-запрос под 1024 а до 1439 страница растягивается по ширине. На 1440 - применяете следующий медиа-запрос.
и т.д.
Изходя из bootstrap 4, понял что лучше действительно верстать от малого устройства к большему. Точки разрешения беру их же, только зачастую еще добавляю медиа-запрос для max-width: 320px.
Простой
