Question

目前为一个客户工作，该客户要求在分辨率为 2560x1600 的两个不同屏幕上调整界面。

问题是这两个屏幕的分辨率相同，但屏幕对角线不同。事实上，一个对角线是 27 英寸，另一个是…… 9 英寸。

因此在 9" 上阅读元素实际上是不可能的，这就是我需要在这个特定屏幕上调整元素的原因。

最初我想使用 DPR（设备像素比），我认为这不一样......但事实并非如此。这两个项目都有 1 个 DRP。

所以我无法使用 CSS 媒体查询规则。

@media (min-width: 2560px) and (-webkit-min-device-pixel-ratio: 2.5) { ... }

有人有想法吗？

谢谢

Answer 1

您可以设置视口来处理此问题。

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

您可以调整各种设置，例如最小、最大比例和设备高度。

Answer 2

在使用响应式 html 和 css 时，不要理会 DPR。

@media (min-width: 2560px) { ... }
@media (min-width: 1980px) { ... }

您可以将 min-width 用于移动优先响应式设计，或将 max-width 用于桌面优先响应式设计：

@media (max-width: 2560px) { ... }
@media (max-width: 1980px) { ... }

推荐的响应步骤为 1200 像素、992 像素、768 像素和 576 像素。当然，您还需要 viewport 元标记 <meta name="viewport" content="width=device-width, initial-scale=1">