如何根据屏幕宽度计算 CSS 缩放因子？

Question

我为什么要问这个问题？

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

如果屏幕尺寸大于 1920 像素，所有现有比例应保持不变，外观应根据屏幕宽度变大。

我需要的是这样的：

// 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 非常适合我目前的情况。例如，如果屏幕宽度为 4000 像素，我需要 266% 的缩放。 X 的选择在这里不会造成混淆。

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

这主要是关于确定一个动态缩放因子，它会根据分辨率（也取决于当前窗口宽度，因此是 100vw，而不是 100%）而变化，而不会产生大量媒体查询。

最后说明：

我已经开始了一次赏金活动。给出的答案是错误的。我不知道为什么人们赞成它。如果你点击“run code snipped”并在新窗口中打开结果并调整窗口大小，你会看到，当你调整窗口大小时它不起作用。

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

最后但同样重要的是：

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

Answer 1

这主要是关于确定动态缩放系数，该系数根据分辨率而变化 [...] 否 请使用 JavaScript，仅限 CSS 解决方案。

这本身就是可能的，尽管您的问题的一个陈述极大地限制了解决方案：“我不想为真正的大屏幕创建这么多媒体查询。”。不幸的是，如果不使用大量媒体查询，这将无法解决。

让我详细说明这个大胆的声明。仅使用 CSS 无法获取屏幕宽度和/或高度（参见 this）。您唯一的可能是使用 @media 查询 - 它们正是为此目的而发明的，即如果宽度等于或小于 1200 像素，您的 CSS 应该以某种方式显示：

@media (max-width: 1200px) {
  /* Specific CSS for 0px <= width <= 1200 */
}

如果你接受JavaScript，我们显然可以通过$(window).width()，分别$(window).height()掌握当前的宽度和高度，甚至可以通过screen.width和screen.height掌握屏幕宽度和高度（点击here获取一个例子）。但是正如您特别提到的不包含 JS，我将更深入地介绍 CSS 解决方案：

顺便说一句，我们现在知道我们无法仅使用 CSS 获取屏幕尺寸，因此由于无法计算 “magic X 因子”，我们无法动态解决此问题时间>。那我们能做什么呢？好吧，如上所述，@media 查询是specifically designed for such a use case！

@media 在几乎所有现代浏览器上都可用，请参阅here 的图表：

使用@media，我们可以构建类似这样的逻辑：

@media all and (max-width: 2559px), (min-width: 1920px) {
   /* specific CSS for this screen size */
}

@media all and (max-width: 3839px), (min-width: 2560px) {
   /* specific CSS for this screen size */
}

显然，您可以通过某种方式自定义适合您的 @media 查询，这样您的“动态”缩放仍然看起来完美无缺。在我的示例中，我考虑了 WQHD 和 UHD 分辨率的大小，因此如果它是 1440p，则将执行第一个 CSS，如果它是 4k（这里是 a list of common monitor/TV resolutions），则将执行第二个 CSS。

显然，使用过多的@media 查询将是不利的——从性能方面和可维护性的角度来看。我很乐意为您提供更好的解决方案，但是按照您对这个问题实施的严格规则，除了最初为实现这一目标而开发的功能之外，很难提出任何建议。如果您仍想仅使用 CSS，可以查看 this GitHub repo - 它有助于使 @media 查询更加有序。

最后但并非最不重要的一点是，我想详细介绍 zoom 因素，但似乎你已经控制住了 （从你的具体例子来看 - 在你的情况下，你需要计算您最终决定实施的每个 @media 查询的 X 值）。

---

除了上面提到的链接，我建议以下内容用于进一步阅读目的：

• A general revision about viewport lengths
• Regarding zoom/scale (especially if you decide to go with JS)
• Documentation about CSS3 Media Queries, very useful!
• Another tutorial about @media

Answer 2

您对本网站有完全的控制权吗？这是我的建议：

要获得真正的分辨率独立性，您需要忘记像素。 忘记缩放，这是一个非标准功能。

转到 DOM 的基础并使用 vw 定义字体大小，例如：

body {font-size:1.2vw;}

然后在 em 中定义所有其他大小（不是 rem，因为它保持不变），即：

img {width:20em; height:auto;}

然后您可以根据视口的纵横比为布局编写异常代码。

/* the only use of px is to isolate the mobile version */
@media screen and (orientation: portrait) and (min-width: 981px) {body {font-size:2vw;}}
@media screen and (orientation: landscape) and (min-width: 981px) {body {font-size:1.2vw;}}
@media screen and (max-width: 981px) {body {font-size:4vw;}}

您还可以考虑通过将纵向/横向关键字替换为纵横比来隔离自定义纵横比的布局，如下所述： https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio

你可以在我制作的这个网站上看到这个策略的实际效果： https://bludumpsterrental.com/

Answer 3

我不认为可以通过 CSS 以任何方式计算缩放系数。

但是，您可以使用 3d 构造获得类似的结果。

在 sn-p 中，一个宽度为 400px 的 div 被缩放到全宽调整 body 的变换。

（您需要将 sn-p 设置为“整页”才能看到它的工作原理。

div {
  width: 395px;
  background-color: tomato;
  border: solid 1px black;
}

body {
    transform: perspective(100vw) translateZ(calc(100vw - 400px));
    transform-origin: left center;
}

<div>Test</div>

Answer 4

这样的事情可能会奏效（您可能需要稍微调整一下数字才能获得预期的结果）：

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

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

备注

• 我使用了较低的屏幕断点，因此我可以用我的显示器对其进行测试（我没有 4k 显示器）
• 它有一个注意事项是计算父项的宽度，但如果您使用body 进行计算，它可能会起作用。
• 展开 sn-p 以查看差异。

更新

但是，更好的解决方案是设置一个给定大小（大约 10 像素）的根 em，并使用媒体查询将此值增加到特定屏幕大小以上。在您的样式表中使用rem 作为度量单位也很重要（而不是em、px）。

相关问题：How to set base size for rem