• base.css with some styles that apply everywhere

• 339px.css for widths up to 339px

• 639px.css for widths up to 639px

• 999px.css and

• bigscreen.css for anything above 999px width

代码：

<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.54cm)的任何设备上都能够完美地执行.然而,最近许多显示设备的像素密度比这高很多,所以当339px.css是合适的时候,它们就适用于639px.css.这是一个问题,因为内容看起来太小了.

另请注意,我不能使用JavaScript和台式机,总是可以根据宽度得到相应的css文件,无论方向如何.

我正在寻找什么：

> 339px.css的任何设备与：

>宽度<= 339像素
>一个高分辨率,但一个小屏幕(例如我的Android智能手机,1280×720,但5.7“屏幕)和纵向.

我想要一个相对于设备像素密度的单位(桌面,平板电脑,智能手机,4k显示器,“Retina”显示器),您可以获得想法),并与所有主流浏览器兼容移动和桌面平台.

同时,我还需要对旧版浏览器的css像素进行回退.

这给我一个很大的头痛.据我所知,您可以使用设备像素比,但是我没有成功地将css文件在某个时间点(两个css文件活动的区域,例如339px.css和639px)进行“重叠”的CSS).

我在我的智慧结束.我已经尝试了最小宽度,最大宽度,设备像素比,方向：纵向/横向媒体查询的组合,但是由于桌面应该忽略方向的事实失败.到目前为止,即使我忽略了浏览器的支持要求,我也不能在设备上获得积极的结果.