我们可以使用屏幕分辨率而不是视口来应用 CSS 吗？

Question

我想添加基于屏幕分辨率而不是视口的 CSS 样式。

情况如下：我的屏幕分辨率为 (1980px x 1080px)，如果我将 Windows 10“缩放和布局”设置为 125%，它会更改屏幕的视口并显示该视口样式。我想根据屏幕分辨率而不是视口显示我的媒体风格。

目前，我正在使用这些媒体查询来获得高分辨率：

// X-Large devices (large desktops, 1200px and up)
@media (min-width: 1200px) { ... }

// XX-Large devices (larger desktops, 1400px and up)
@media (min-width: 1400px) { ... }

我们可以只使用 CSS 而不是 JS 来实现这一点吗？

截图：

窗口 10 比例 100%：

100% 比例的视口：

窗口 10 比例 125%：

比例为 125% 的视口：

Answer 1

为了区分不同的缩放比例，我们需要查看像素密度。分辨率媒体功能可用于：

/* used just for the demo*/
* {
  margin: 0;
  padding: 0;
}


/* your normal device specific media queries 
    @media (min-width: 1200px) {
      ...
    }
    @media (min-width: 1400px) {
      ...
    } */


/***********************/

.nonscaling {
  transform-origin: 0 0;
  background-color: wheat;
  width: fit-content;
}


/* scaling media queries */


/* 1. scale and layout setting at 100% */
@media (resolution: 1dppx) {
  .scale::after {
    content: '100%';
  }
}


/* 2. scale and layout setting at 125% */
@media (resolution: 1.25dppx) {
  .scale::after {
    content: '125%';
  }
  .nonscaling {
    /* offset the scaling */
    /* factor = 100/125 percent */
    transform: scale(0.80);
  }
}


/* 3. scale and layout setting at 150% */
@media (resolution: 1.5dppx) {
  .scale::after {
    content: '150%';
  }
  .nonscaling {
    transform: scale(0.6666);
  }
}


/* 4. scale and layout setting at 175% */
@media (resolution: 1.75dppx) {
  .scale::after {
    content: '175%';
  }
  .nonscaling {
    transform: scale(0.5714);
  }
}

<div class="nonscaling">I will not scale! Period.</div>
<div class="scale">You've scaled: </div>

在 Windows 设置中，将Scale and layout设置更改为 100%、125%、150% 或 175%。并在这里查看效果。
在上面的代码片段中，我们使用dppx单位，您可以使用其他单位。为了补偿缩放元素，我们使用transform: scale(..)特征。您可以使用缩放功能，但 Firfox不支持它。

注意：您可以应用于transform:scale(..)整个 body 标签，以用一条规则处理所有内容。
另外，您可以尝试组合最小分辨率、最大分辨率和最小宽度、最大宽度，例如@media (min-width:1200px) and (resolution: 1dppx).