根据屏幕分辨率和大小自适应CSS。

Question

3

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

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

因此，在9英寸的屏幕上几乎无法阅读元素，这就是我需要在这个特定屏幕上调整元素的原因。

最初我考虑使用设备像素比（DPR），我认为它们不相同... 但实际上它们都是1 DRP。

所以我不能使用CSS媒体查询规则。

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

有人有什么想法吗？

谢谢。

- Jach Michael

你的元素遵循哪些规则？ - Xanthous

响应式网页设计 - 网格视图 - Weyers de Lange

哪些规则？你能再解释一下吗？ - Jach Michael

分辨率（单位=dpi）应该不同。 - vals

2个回答

1

当使用响应式的html和css时，不必担心DPR。

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

您可以使用min-width实现面向移动设备的响应式设计，或使用max-width实现面向桌面设备的响应式设计：

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

推荐的响应式步骤为1200px、992px、768px和576px。当然，你需要 viewport meta 标签 <meta name="viewport" content="width=device-width, initial-scale=1">。

- dreamLo

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Nathelol · Accepted Answer

你可以设置viewport来处理这个问题。

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

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