Это довольно широкая тема.Тем не менее, вот некоторые вещи, которые могут вам помочь.
px неплох и имеет много вариантов использования.Например, я склонен использовать px, когда я устанавливаю высоту объекта.Поскольку отзывчивость обычно коррелирует с шириной, она становится немного сложнее, но вы можете использовать такие вещи, как min-width или max-width, чтобы начать думать об отзывчивости.
Вы также можете использовать проценты, однако мне лично нравится использовать макеты CSS, такие как flexbox или grid, для настройки моего сайта.Как они имеют тенденцию быть более гибкими.Таким образом, часть адаптивного дизайна уже достигается с помощью модуля компоновки CSS.
Как правило, нет жестких быстрых правил в отношении того, как сделать страницу адаптивной, поскольку каждый веб-сайт отличается.Вы найдете сотни сайтов, дающих вам @media размеры для каждого типа экрана, известного человеку, но более важно взглянуть на ваш сайт и увидеть, где контент естественно начинает ломаться по мере его роста или уменьшения.Затем вы можете более точно определить, когда вы хотите, чтобы ваш @media вступил в силу.
Наконец, вам не нужно использовать @media миллион раз, только если вы решили, что ваш макет должен измениться.Затем просто внесите изменения в css внутри единого @media для всего, что вы хотите изменить при конкретном размере экрана и ниже или выше.