html - 根据屏幕分辨率和屏幕大小调整 CSS

Question

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

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

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

最初我考虑使用 DPR(设备像素比)，我认为它不一样......但事实并非如此。这两个都有 1 个 DRP。

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

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

有人有想法吗？

谢谢

Answer 1

您可以设置视口(viewport)来处理这个问题。

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

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

https://developer.mozilla.org/en-US/docs/Web/HTML/Viewport_meta_tag

https://css-tricks.com/snippets/html/responsive-meta-tag/