Css media queries, плотность пикселей, настольные и мобильные устройства

ситуация :
У меня есть 5 CSS-файлов:

• базы.CSS с некоторыми стилями, которые применяются везде

• 339px.css для ширины до 339px

• 639px.css для ширины до 639px

• 999px.css и

• телевизоре с большим.css для чего-либо выше ширины 999px

код :

<link rel="stylesheet" type="text/css" media="all" type="text/css" href="css/base.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:    0px) and (max-width: 339px)" href="css/339px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  340px) and (max-width: 639px)" href="css/639px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width:  640px) and (max-width: 999px)" href="css/999px.css" />
<link rel="stylesheet" type="text/css" media="screen and (min-width: 1000px)" href="css/bigscreen.css" />

это все хорошо и хорошо и отлично работает на любом устройстве, где 1 пиксель css равен 1/96 дюйма (2,54 см) на экране устройства. В последнее время, однако, многие устройства отображения имеют плотность пикселей намного выше, чем это, поэтому они применяют, скажем, 639px.css, когда 339px.css был бы уместен. Это проблема, так как содержимое выглядит путь слишком мал.

Также обратите внимание, что я не могу использовать JavaScript и настольные компьютеры всегда получают соответствующий файл css в соответствии с шириной, независимо от ориентации.

что я ищу, чтобы достичь:

• 339px.CSS для любого устройства с:
  
  • ширина
  • высокое разрешение, но небольшой экран (например, мой Android смартфон с 1280x720, но 5.7" экран) и в портретной ориентации.

Bascially вместо пикселя css, Я бы хотел, чтобы устройство было относительно плотности пикселей устройства (рабочий стол, планшет, смартфон, 4K-дисплеи, дисплеи "Retina", вы понимаете идею) и работало со всеми основными браузерами на мобильных и настольных платформах.

в то же время мне также нужен резерв для CSS-пикселей для старых браузеров.

это дало мне головную боль, чтобы достичь этого. Насколько я понимаю, вы могли бы использовать device-pixel-ratio, но мне не удалось не сделать css-файлы "перекрывающимися" на некоторая точка (область, где активны два css-файла, например 339px.css и 639px.стиль CSS.)

Я в тупике. Я пробовал комбинацию min-width, max-width, device-pixel-ratio, orientation: portrait/landscape media query, но это не удалось из-за того, что настольные компьютеры должны игнорировать ориентацию. До сих пор я не мог получить положительный результат на разных устройствах, даже если я проигнорировал требование поддержки браузера.