Учусь адаптировать верстку и вот возникает вопрос, как это лучше делать?
Я ведь могу адаптировать по точкам, например, вот в браузере есть 1440, 1024, 768 и так далее, а могу просто потихоньку уменьшать ширину экрана и в тот момент, когда какой-то элемент поедет прописывать медиа запрос, но второй вариант мне кажется каким-то не практичным.
А если по точкам делать, вот например, для 1024px пропишу свои стили, а у пользователя будет экран шириной чуть больше 1024 и у него получается будет безобразие на экране, вот что меня смущает.
Да и с текстом не совсем понятно в каких лучше единицах прописывать размеры в px. процентах или em?
Потому что ширину уменьшаю и те же заголовки состоящие из двух слов в столбик идти начинают и приходится в ручную прописывать размер.
На этот вопрос в двух словах не ответишь. Тут не одну статью написать можно.
Вы лучше погуглите про адаптивную верстку, материалов – вагон и маленькая тележка.
Я думаю, проще всего выбрать какой-то общепринятый список брейкпоинтов и уменьшать максимальную ширину контейнера на каждом брейкпоинте до ширины следующего брейкпоинта при desktop first. При mobile first максимальную ширину контейнера делать равной брейкпоинту. Таким образом ширина сайта всегда будет меньше ширины экрана, и ничего никуда не уедет.
Чтобы все правильно адаптировалось, нужно изначально правильно записывать. Например: добавлять flex-wrap к каким-то блокам, записывать в правильных единицах, проверяя изменения в адаптиве чуть ли не после каждого свойства. Ну, и max-width для разной подправки, я ее использую только чтобы сделать сайт солиднее по типу отступов, а остальное у меня само по себе адаптируется. И также, лучше указывайте большим текстам em, чтобы уменьшить их одним только стилем для html, верстать продумано, механически и тактично доставляет реальное удовольствие.
Как минимум у тебя должен быть ограничивающий container, в котором собственно и задана та ширина, которая находится в макете, то есть с шириной браузера в 1920px, дизайнер может сделать контейнер в 1600px, и уже отталкиваясь от первой точки, пишешь медиа запрос для 1650px, но это уже на свое усмотрение, и соответственно контейнер станет уже не 1600px а 1440px, и т.д. и вот на этих брейкпоинтах когда уменьшается контейнер, ты и пишешь адаптив для других элементов
Простой
Простой
