支持高分辨率显示，同时允许缩放答案

【问题标题】：Support high resolution displays while allowing zoom支持高分辨率显示，同时允许缩放
【发布时间】：2021-06-19 20:45:42
【问题描述】：

我希望我的网站默认在所有屏幕尺寸上看起来都一样，同时允许缩放以在需要时更改其外观。

如果我使用percentages 或vh / vw，那么当用户放大/缩小时，我的页面的某些元素将不会缩放。如果我使用px / rem / em，那么我的那些拥有高分辨率显示器（例如 2560x1440）的用户将看到比那些具有较低分辨率显示器（例如 1920x1080）的用户更小的 ui 元素。

一个完美的解决方案是一个测量单位，默认情况下与屏幕尺寸成正比（如vw/vh/百分比），但同时，当用户放大/缩小时，它会缩放.这样一来，所有设备的默认行为都是相同的，并且任何用户都可以根据需要缩放其屏幕。

CSS [3] 中没有这样的度量单位。没有办法在 sass 中实现，在js[1]、[2] 的浏览器中对缩放级别的支持很差。为什么还不支持这种技术，因为它似乎是设计网站的好方法。 每个人都使用相同的默认值，同时允许每个人进行自定义。

【问题讨论】：

注意there is a difference在“物理分辨率”和“CSS分辨率”中

标签： javascript css responsive-design

【解决方案1】：

使用 CSS 变量并根据初始窗口的像素尺寸定义您自己的单位会有帮助吗？

例如

window.onload = function () {
  const w = window.innerWidth;
  const h = window.innerHeight;
  document.body.style.setProperty('--vmin', Math.min(w, h)/100 + 'px');
}

div {
  width: calc(10 * var(--vmin));
  height: calc(10 * var(--vmin));
  background-color: magenta;
}

&lt;div&gt;&lt;/div&gt;

【讨论】：

【解决方案2】：

我已经使用两个媒体查询和一个 sass 函数解决了这个问题。这是我的 sass 文件中的一个 sn-p：

@function vw($px-vw, $base-vw: 1920px) {
  @return ($px-vw / $base-vw) * 100vw;
}

@media screen and (min-width: 0px) {
  .container {
    flex: 0 0 vw(280px);

    margin: vw(40px);
    border-radius: vw(30px);

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
  }

  .logo_container {
    background-color: #ffffff;
    margin: vw(40px) vw(80px) vw(40px) vw(80px);
  }
}

@media screen and (min-width: 1920px) {
  .container {
    flex: 0 0 280px;

    margin: 40px;
    border-radius: 30px;

    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    background-color: #ffffff;
  }

  .logo_container {
    border-radius: 30px;
    background-color: #ffffff;
    margin: 40px 80px 40px 80px;
  }
}

【讨论】：