CSS 媒体查询、像素密度、桌面和移动设备

Question

情况：
我有 5 个 CSS 文件：

• base.css 包含一些适用于任何地方的样式

• 339px.css，宽度不超过 339px

• 639px.css，宽度最大为 639px

• 999px.css 和

• 大于 999 像素宽度的任何东西都使用 bigscreen.css

代码：

<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 厘米）的任何设备上都能完美运行。然而，最近，许多显示设备的像素密度远高于此，因此当 339px.css 更合适时，它们会应用 639px.css。这是个问题，因为内容看起来方式太小了。

另外请注意，我不能使用 JavaScript，桌面计算机应该总是根据宽度获取相应的 css 文件，无论方向如何。

我想要实现的目标：

• 339px.css 适用于任何设备：
  
  • 宽度
  • 高分辨率但小屏幕（例如我的 1280x720 但屏幕为 5.7 英寸的 Android 智能手机）并且是纵向的。

基本上，我想要一个与设备像素密度相关的单位（台式机、平板电脑、智能手机、4k 显示器、“Retina”显示器，你懂的）并且适用于所有主要的像素密度而不是 css 像素移动和桌面平台上的浏览器。

同时，我还需要为旧版浏览器回退到 css 像素。

实现这一点让我非常头疼。据我了解，您可以使用device-pixel-ratio，但我没有成功地不使css文件在某个点“重叠”（两个css文件处于活动状态的区域，例如339px.css和639px.css )。

我束手无策。我尝试了min-width、max-width、device-pixel-ratio、orientation: portrait/landscape 媒体查询的组合，但由于桌面应该忽略方向而失败。到目前为止，即使我忽略了浏览器支持要求，我也无法跨设备获得积极的结果。

Answer 1

将此添加到您的head：

<meta name="viewport" content="width=device-width, initial-scale=1.0">

width=device-width 考虑了像素密度，因此真正分辨率为 640 像素宽度和 2.0 像素密度的设备将具有 320 像素的浏览器视口宽度。初始比例确保移动浏览器不会尝试缩放以适应任何内容（对于真正的流畅响应网站）。