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

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

如果我使用

百分比

或

vh

/

vw

，则当用户放大/缩小时，我页面的某些元素将无法缩放。如果我使用

px

/

rem

/

em

，那么那些具有高分辨率显示器（例如2560x1440）的用户将看到比那些具有低分辨率显示器（例如1920x1080）的用户更小的ui元素

一个完美的解决方案是一个测量单位，默认情况下，它与屏幕大小成比例（如

vw

/

vh

/百分比），但同时，当用户放大/缩小时，它会缩放。这样，所有设备的默认行为都是相同的，任何用户都可以根据需要缩放屏幕

---

CSS中没有这样的度量单位。在sass中没有实现它的方法，而且在

js

中的浏览器中对缩放级别的支持很差。为什么这项技术还不被支持，因为它似乎是设计网站的好方法每个人都有相同的默认设置，同时允许每个人进行自定义。

是否可以使用CSS变量并根据初始窗口的像素尺寸定义自己的单位

e、 g

window.onload=函数（）{
const w=窗的宽度；
常数h=窗内高度；
document.body.style.setProperty（'--vmin'，Math.min（w，h）/100+'px'）；
}

div{
宽度：计算值（10*var（--vmin））；
高度：计算值（10*var（--vmin））；
背景色：洋红色；
}

---

是否可以使用CSS变量并根据初始窗口的像素尺寸定义自己的单位

e、 g

window.onload=函数（）{
const w=窗的宽度；
常数h=窗内高度；
document.body.style.setProperty（'--vmin'，Math.min（w，h）/100+'px'）；
}

div{
宽度：计算值（10*var（--vmin））；
高度：计算值（10*var（--vmin））；
背景色：洋红色；
}

---

我使用两个媒体查询和一个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;
  }
}

---

我用两个媒体查询和一个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;
  }
}

请注意，在“物理分辨率”和“CSS分辨率”中，请注意在“物理分辨率”和“CSS分辨率”中