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

Question

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

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

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

CSS[3]. There is no way to implement it in sass, and zoom level is poorly supported in browsers in js [1], [2]中没有这样的计量单位。为什么这项技术还不受支持，因为它似乎是设计网站的好方法。 每个人都使用相同的默认值，同时允许对每个人进行自定义。

Answer 1

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

例如

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;
}

<div></div>

Answer 2

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

@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;
  }
}

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

Support high resolution displays while allowing zoom

javascript

css

responsive-design