相关疑难解决方法(0)

为了更好地平衡我正在处理的页面,我想找到一种方法来根据屏幕分辨率增加DIV的上边距.使用jQuery或Javascript设置这些维度的最佳方法是什么？

当屏幕宽度小于480px时,我使用以下CSS代码进行格式化,并且它运行良好.

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
    }
}

我想得到当前的计算宽度,zoom如下所示:

@media screen and (min-width: 480px) {
    body {
        background-color: lightgreen;
        zoom: (current screen width)/(480);
    }
}

.visitcard-ipcashier {
    position: fixed;
    background: white;
    top: 0;
    right: 0;
    height: 95%;
    overflow: auto;
    z-index: 50;
}

在上面的代码中，我在 93% 中使用了高度属性。但这取决于屏幕。如何在css中获取屏幕高度？

我为什么问这个问题？

我不想为真正的大屏幕创建这么多媒体查询。

如果屏幕尺寸大于 1920px，则所有现有比例应保持不变，并且外观应根据屏幕宽度而变大。

我需要的是这样的东西：

// PSEUDO CODE!

@media screen and (min-width: 1921px) {
  .content-block {
    zoom: calc (100vw divided by X)  // <- HERE
  }
}

例子：

X            = 15 
Screen width = 4000px 
Zoom-factor  = 400 / 15 ~ 266% 

X 是任何神奇的数字。

有人可能会认为如果 1900 是 100%，也许 19.2 可能更合适，但我已经尝试过很多数字；15 非常适合我目前的情况。例如，如果屏幕宽度为 4000px，我需要缩放 266%。这里X的选择不应造成混淆。

根据设置的媒体查询，缩放仅从 1921px 开始，但这也是次要问题。

它主要是确定动态缩放系数，该系数根据分辨率（也根据当前窗口宽度，因此是 100vw，而不是 100%）而变化，而不会创建大量媒体查询。

最后注意事项：

我已经开始赏金一次了。给出的答案是错误的。我不知道为什么人们会投票。如果您单击“运行代码片段”并在新窗口中打开结果并调整窗口大小，您会发现，调整窗口大小时它不起作用。

在所需的解决方案中，当您调整窗口大小时，缩放系数应不断变化。

最后但并非最不重要的：

请不要使用 JavaScript，仅使用 CSS 解决方案。如果它能在 Chrome 和 Edge of Today 中运行就足够了。