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

Question

情况:
我有 5 个 CSS 文件:

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

另请注意，我不能使用 JavaScript，台式计算机应始终根据宽度获取相应的 css 文件，无论方向如何。

我希望实现的目标:

• 339px.css 适用于任何设备:
  
  • 宽度<=339px
  • 高分辨率但屏幕较小(例如，我的 Android 智能手机的分辨率为 1280x720，但屏幕为 5.7 英寸)且为纵向。

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

同时，我还需要为旧版浏览器回退到 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 像素的浏览器视口(viewport)宽度。初始比例确保移动浏览器不会尝试缩放以适合任何内容(对于真正的流畅响应网站)。