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

onk*_*kar 5

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

/* 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%。并在此处查看效果。
在上面的代码片段中，我们使用了dppxunit ，您可以使用其他 units。为了补偿我们使用transform: scale(..)特征的缩放元素。您可以使用缩放，但 Firfox不支持它。

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