如何根据屏幕宽度计算 CSS 缩放因子?
How to calculate CSS zoom factor in dependence on screen width?
为什么我会问这个问题?
我不想为真正的大屏幕创建那么多媒体查询。
如果屏幕尺寸大于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的选择在这里不要混淆。
缩放只根据设置的media-query从1921px开始,但这也是次要问题
它主要是关于确定一个动态缩放因子,它根据分辨率而变化(也在当前 window 宽度上,因此是 100vw,而不是 100%),而不创建大量的媒体查询。
最后的笔记:
我已经开始赏金了。给出的答案是错误的。我不知道为什么人们赞成它。如果您点击“运行 code snipped”并在新的 window 中打开结果并调整 window 的大小,您会看到,当您调整 [=54= 的大小时它不起作用].
在所需的解决方案中,缩放系数应在您调整 window 大小时不断变化。
最后一点:
否 JavaScript,请仅 CSS 解决方案。 Chrome 和 Edge of Today
能用就够了
这样的方法可行(您可能需要稍微调整一下数字才能获得预期结果):
@media screen and (min-width: 1290px) {
.content-block {
zoom: calc((100% / 15) * 100)
}
}
<div class="content-block">
alalala
</div>
注释
- 我使用了较低的屏幕断点,所以我可以用我的显示器测试它(我没有 4k 显示器)
- 它有一个使用父级宽度计算的注意事项,但如果您使用
body
进行计算,它可能会起作用。
- 展开代码片段以便您可以看到不同之处。
更新
但是,更好的解决方案是设置给定大小(大约 10 像素)的根 em
并使用媒体查询将此值增加到特定屏幕大小以上。在样式表中的任何地方都使用 rem
作为度量单位也很重要(而不是 em
、px
)。
相关问题:
我不认为可以通过 CSS 以任何方式计算缩放系数。
但是,您可以使用 3d 构造获得类似的结果。
在代码片段中,宽度为 400 像素的 div 被缩放到全宽以调整正文的变换。
(您需要将代码段设置为“整页”才能正常运行。
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>
您是否拥有该网站的完全控制权?这是我的建议:
为了实现真正的分辨率独立性,您需要忘记像素。
忘记缩放,那是一个非标准功能。
转到 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;}}
您还可以考虑通过将 portrait/landscape 关键字替换为纵横比来为自定义纵横比隔离布局,如下所述:
https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
你可以在我做的这个网站上看到这个策略的实际应用:
https://bludumpsterrental.com/
It is primarily about determining a dynamic zoom factor, which changes depending on the resolution [...] No
JavaScript, please, CSS solutions only.
这本身是可能的,尽管您的问题的一个陈述极大地限制了解决方案:“我不想为真正的大屏幕创建这么多媒体查询。”.不幸的是,如果不使用大量媒体查询,这个 将无法解决。
让我详细说明一下这个大胆的声明。仅使用 CSS 无法获得屏幕宽度 and/or 高度(参见 this)。您唯一的可能性是使用 @media
查询 - 它们正是为此目的而发明的,即如果宽度等于或小于 1200px,您的 CSS 应该以某种方式显示:
@media (max-width: 1200px) {
/* Specific CSS for 0px <= width <= 1200 */
}
如果你接受了JavaScript,我们显然可以通过$(window).width()
分别掌握当前的宽高,甚至可以通过screen.width
得到屏幕的宽高=] 和 screen.height
(点击 here 查看示例)。但是正如您特别提到的不包含 JS,我将更深入地探讨 CSS 解决方案:
顺便提一下,我们现在知道我们无法仅通过 CSS 获取屏幕尺寸,因此由于无法计算 ,我们无法动态解决此问题]“神奇的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
分辨率的大小,因此第一个 CSS 将在 1440p 时执行,第二个在 4k 时执行(这里是 a list of common monitor/TV resolutions).
显然,使用太多 @media
查询将是一个缺点 - 从性能方面和可维护性的角度来看。我很想给你一个更好的解决方案,但是按照你在这个问题上强制执行的严格规则,除了最初为实现这样一个目标而开发的功能之外,很难提出任何建议。如果您仍想使用 CSS-only,可以看看 this GitHub repo - 它有助于使 @media
查询更加有序。
最后但并非最不重要的一点是,我想详细了解 zoom
因素,但看起来你已经控制住了 (根据你的具体例子判断 - 在你的情况下,您需要为最终决定实施的每个 @media
查询计算 X 值).
除了上面提到的链接,我还建议以下内容以供 进一步阅读 目的:
为什么我会问这个问题?
我不想为真正的大屏幕创建那么多媒体查询。
如果屏幕尺寸大于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的选择在这里不要混淆。
缩放只根据设置的media-query从1921px开始,但这也是次要问题
它主要是关于确定一个动态缩放因子,它根据分辨率而变化(也在当前 window 宽度上,因此是 100vw,而不是 100%),而不创建大量的媒体查询。
最后的笔记:
我已经开始赏金了。给出的答案是错误的。我不知道为什么人们赞成它。如果您点击“运行 code snipped”并在新的 window 中打开结果并调整 window 的大小,您会看到,当您调整 [=54= 的大小时它不起作用].
在所需的解决方案中,缩放系数应在您调整 window 大小时不断变化。
最后一点:
否 JavaScript,请仅 CSS 解决方案。 Chrome 和 Edge of Today
能用就够了这样的方法可行(您可能需要稍微调整一下数字才能获得预期结果):
@media screen and (min-width: 1290px) {
.content-block {
zoom: calc((100% / 15) * 100)
}
}
<div class="content-block">
alalala
</div>
注释
- 我使用了较低的屏幕断点,所以我可以用我的显示器测试它(我没有 4k 显示器)
- 它有一个使用父级宽度计算的注意事项,但如果您使用
body
进行计算,它可能会起作用。 - 展开代码片段以便您可以看到不同之处。
更新
但是,更好的解决方案是设置给定大小(大约 10 像素)的根 em
并使用媒体查询将此值增加到特定屏幕大小以上。在样式表中的任何地方都使用 rem
作为度量单位也很重要(而不是 em
、px
)。
相关问题:
我不认为可以通过 CSS 以任何方式计算缩放系数。
但是,您可以使用 3d 构造获得类似的结果。
在代码片段中,宽度为 400 像素的 div 被缩放到全宽以调整正文的变换。
(您需要将代码段设置为“整页”才能正常运行。
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>
您是否拥有该网站的完全控制权?这是我的建议:
为了实现真正的分辨率独立性,您需要忘记像素。 忘记缩放,那是一个非标准功能。
转到 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;}}
您还可以考虑通过将 portrait/landscape 关键字替换为纵横比来为自定义纵横比隔离布局,如下所述: https://developer.mozilla.org/en-US/docs/Web/CSS/@media/aspect-ratio
你可以在我做的这个网站上看到这个策略的实际应用: https://bludumpsterrental.com/
It is primarily about determining a dynamic zoom factor, which changes depending on the resolution [...] No JavaScript, please, CSS solutions only.
这本身是可能的,尽管您的问题的一个陈述极大地限制了解决方案:“我不想为真正的大屏幕创建这么多媒体查询。”.不幸的是,如果不使用大量媒体查询,这个 将无法解决。
让我详细说明一下这个大胆的声明。仅使用 CSS 无法获得屏幕宽度 and/or 高度(参见 this)。您唯一的可能性是使用 @media
查询 - 它们正是为此目的而发明的,即如果宽度等于或小于 1200px,您的 CSS 应该以某种方式显示:
@media (max-width: 1200px) {
/* Specific CSS for 0px <= width <= 1200 */
}
如果你接受了JavaScript,我们显然可以通过$(window).width()
分别掌握当前的宽高,甚至可以通过screen.width
得到屏幕的宽高=] 和 screen.height
(点击 here 查看示例)。但是正如您特别提到的不包含 JS,我将更深入地探讨 CSS 解决方案:
顺便提一下,我们现在知道我们无法仅通过 CSS 获取屏幕尺寸,因此由于无法计算 ,我们无法动态解决此问题]“神奇的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
分辨率的大小,因此第一个 CSS 将在 1440p 时执行,第二个在 4k 时执行(这里是 a list of common monitor/TV resolutions).
显然,使用太多 @media
查询将是一个缺点 - 从性能方面和可维护性的角度来看。我很想给你一个更好的解决方案,但是按照你在这个问题上强制执行的严格规则,除了最初为实现这样一个目标而开发的功能之外,很难提出任何建议。如果您仍想使用 CSS-only,可以看看 this GitHub repo - 它有助于使 @media
查询更加有序。
最后但并非最不重要的一点是,我想详细了解 zoom
因素,但看起来你已经控制住了 (根据你的具体例子判断 - 在你的情况下,您需要为最终决定实施的每个 @media
查询计算 X 值).
除了上面提到的链接,我还建议以下内容以供 进一步阅读 目的: