Заинтересовал второй вариант

Хотелось бы обойтись без либ. Интересно какой там принцип работы?

выпадающих элемент рендерится в боди и цепляется к координатам условного родителя

@media (min-width:320px)  { /* smartphones, portrait iPhone, portrait 480x320 phones (Android) */ }
@media (min-width:480px)  { /* smartphones, Android phones, landscape iPhone */ }
@media (min-width:600px)  { /* portrait tablets, portrait iPad, e-readers (Nook/Kindle), landscape 800x480 phones (Android) */ }
@media (min-width:801px)  { /* tablet, landscape iPad, lo-res laptops ands desktops */ }
@media (min-width:1025px) { /* big landscape tablets, laptops, and desktops */ }
@media (min-width:1281px) { /* hi-res laptops and desktops */ }
А что если у мобильного девайса разрешение 1080х1920?

он же будет работать как hi-res десктоп

Намек понял, спасибо!

таких девайсов нет

У меня 2к разрешение на телефоне

и что?

css делит на 2/3/4

плотность пикселей потому что x2. x3. x4

итого 1080 превращаются в 360

Ааа, понял. И это от девайся зависит тогда?

остальное в сети найдёшь

да

Я понял о чем вы, спасибо. dpi значит передается

сильно зависит от данных в  meta viewport, но в реальных пикселях никто не работает, это крайне трудозатратно

А в css есть встроенные свойства для того что бы текст был контрастным в зависимости от фона?

mix-blend-mode пробуй

Интересно, но не сработало.