Адаптивные стили в CSS/SASS/SCSS

Существуют ли методы, позволяющие создавать стили, которые бы способствовали отображению контента на разных экранах одинаково отлично?

Во многих источниках создание адаптивных стилей описывается через медиа-запросы, в которых учитывается разрешение экрана.

@media only screen and (min-width: 1280px) { }

Проблема в том, что существуют, например, смартфоны с шириной экрана 1290 px (Apple iPhone 15 Pro Max), но так же и используются мониторы десктопов с шириной экрана 1280 px.

Как в таком случае различить, какому устройству какие стили нужно применить?

Ведь размеры элементов в стилях для смартфонов должны быть значительно больше, занимать большую область, относительно всего экрана, нежели занимают на десктопах, чтоб пользователь мог прочесть текст, попасть на кнопку и так далее.

Та же проблема будет и в случае, если смартфон будет в горизонтальной ориентации экрана: есть смартфоны, имеющие 2796 px (Apple iPhone 15 Pro Max), и есть мониторы десктопов, имеющие 2560 px.

В том числе, есть проблема с отображением на ноутбуках. Например, есть монитор 27" с разрешением 2560 x 1440 px, а есть дисплей ноутбука с разрешением 2560 x 1600 px (Apple MacBook Air 13.3" 2020). К ним обоим будут применены одни стили. Однако, за счёт того, что один дисплей 27", а другой 13.3", на одном из них контент страницы может выглядеть слишком большим или слишком маленьким.

Для решения всех перечисленных проблем у меня возникает только одна идея - написать какой-то алгоритм, который на основе плотности пикселей, разрешения экрана, ориентации, и подобных параметров будет выбирать какие стили выбрать для рендера страницы. Это вообще возможно?

Поделитесь своим виденьем решения этих проблем, опытом, примерами.