13

情况：
我有 5 个 CSS 文件：

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

  • 339px.css 宽度最大为 339px

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

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

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

我希望实现的目标：

  • 339px.css 适用于任何设备：
    • 宽度 <=339px
    • 高分辨率但小屏幕（例如我的 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媒体查询的组合，但这失败了，因为桌面应该忽略方向。到目前为止，即使我无视浏览器支持要求，我也无法跨设备获得积极的结果。

4

1 回答 1

35

将此添加到您的head：

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

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

于 2013-11-12T15:28:57.167 回答