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

【问题标题】：Can we apply CSS using Screen Resolution instead of Viewport?我们可以使用屏幕分辨率而不是视口来应用 CSS 吗？
【发布时间】：2022-01-15 02:43:19
【问题描述】：

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

情况如下：我的屏幕分辨率是（1980 像素 x 1080 像素），如果我将 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% 比例的视口：

Window 10 比例 125%：

125% 比例的视口：

【问题讨论】：

所以你还想在较小的视口上显示1920 样式？请记住，出于可访问性的原因，人们可能会扩大视口。
不知道是什么问题，屏幕大小和视口都一样，只是标签+地址栏+书签栏在降低高度
当您使用 windows Layout Scale 为“125%”时，它改变了视口，这是完全不同的事情。抱歉，我想在视口上也以 1920 像素的屏幕分辨率显示 1920px 样式。问题是当我们将 windows 10 布局比例更改为“125%”时，如果您使用 JS window.outerWidth 检查屏幕尺寸，它将显示您屏幕的实际分辨率。但如果你检查视口，它会完全不同。
@AbhishekPandey 实际上这不是真的。如果设备的像素和 css 的像素相等且大多数情况下它们不相等，则屏幕尺寸和视口可以相同。以 iPhone XR 为例，与 iPhone 4 相比，它每英寸的像素更多，因此与 iPhone 4 相比，它作为设备的像素将比 CSS 上的像素更多。我不确定我是否正在制作这里绝对有意义，但是您可以在网上找到很多关于此的文章。视口和屏幕分辨率是两个不同的东西，尽管有时它们可以根据设备的不同而相等。

标签： html css sass windows-10 media-queries

【解决方案1】：

不幸的是，根本无法关闭当前的显示缩放设置并仅使用分辨率，因为它直接影响视口。但是，您可以使用以下媒体查询：

@media screen and (min-resolution: 125dpi) {
   /* Your code here */
}

这会影响以下元素：a) 当显示缩放设置为 125% 及以上，以及 b) 当浏览器中的缩放级别设置为 125% 或以上。

另一个好的做法是将max-width: 100%; 赋予您网站的html 和body 标记。这将防止各种元素达到将它们定位在可见视口之外的大小（当然，除非它们是绝对定位的）。

【讨论】：

【解决方案2】：

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

/* 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%。并在此处查看效果。
在上面的 sn-p 中，我们使用dppx 单元，您可以使用other units。为了补偿缩放元素，我们使用transform: scale(..) 功能。您可以使用 zoom，但使用 Firfox doesn't support it。

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

【讨论】：