Question

情况：
我有5个CSS文件：

base.css，其中包含适用于所有地方的一些样式



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



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



999px.css和



bigscreen.css适用于宽度超过999px的任何内容

代码：

<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文件处于活动状态的区域，例如339px.css和639px）使css文件“重叠”的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考虑像素密度，因此具有640px宽度和2.0像素密度的真实分辨率的设备将具有320px的浏览器视口宽度。初始比例确保移动浏览器不会尝试缩放以适应任何内容（对于真正的流体响应站点）。

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

1 个答案: