如何根据屏幕宽度计算 CSS 缩放系数？

Question

我为什么问这个问题？

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

如果屏幕尺寸大于 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 中运行就足够了。

Answer 1

像这样的东西可能会起作用（你可能需要稍微处理一下数字才能得到预期的结果）：

@media screen and (min-width: 1290px) {
  .content-block {
    zoom: calc((100% / 15) * 100)
  }
}

<div class="content-block">
  alalala
</div>

笔记

更新

然而，更好的解决方案是设置给em定大小（大约 10 px）的根，并使用媒体查询将该值增加到特定屏幕大小以上。在样式表中的任何地方用作rem测量单位也很重要（而不是em，px）也很重要。