情况：
我有5个CSS文件:
base.css包含一些适用于所有地方的样式
339px.css适用于宽度达到339像素以下的场景
639px.css适用于宽度达到639像素以下的场景
999px.css和
bigscreen.css适用于宽度大于999像素的场景
代码：
<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：
- 宽度<= 339px
- 高分辨率但屏幕较小（例如我的安卓智能手机具有1280x720像素但只有5.7英寸的屏幕），并且以竖直方向放置。
基本上，我想要一个相对于设备像素密度的单位（桌面，平板电脑，智能手机，4k显示器，“Retina”显示器等），并且可以在移动和桌面平台上的所有主要浏览器中使用。
同时，我还需要回退到CSS像素以供旧浏览器使用。
这让我头痛不已。据我所知，您可以使用device-pixel-ratio，但是我未能使CSS文件在某些时候“重叠”（例如两个同时处于活动状态的CSS文件的区域，如339px.css和639px.css的区域）。
我已经尝试了min-width，max-width，device-pixel-ratio，orientation：portrait/landscape媒体查询的组合，但由于桌面应忽略方向而导致失败。到目前为止，即使我忽略浏览器支持要求，也无法在所有设备上获得积极的结果。
initial-scale设置为1.0）。 - Ennui