如何根据屏幕宽度计算 CSS 缩放因子?
Posted
技术标签:
【中文标题】如何根据屏幕宽度计算 CSS 缩放因子?【英文标题】:How to calculate CSS zoom factor in dependence on screen width? 【发布时间】:2020-02-26 18:44:38 【问题描述】:我为什么要问这个问题?
我不想为真正的大屏幕创建这么多媒体查询。
如果屏幕尺寸大于 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 中运行就足够了。
【问题讨论】:
我们可以使用 javscript 吗? 你知道zoom
不被火狐支持吧?
@Stender 谢谢,这是 Chrome/Edge 项目,..
100vw divided by 15 in percentage
是什么意思?你能解释一下吗?
@Ivan 100vw 除以 15 和百分比的结果,会产生例如缩放:266%(屏幕尺寸 4000px 宽度)
【参考方案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
【讨论】:
@Lonely 如果我要深入探讨您问题的某个方面,请告诉我!我试图阐明你的情况,也就是说,如果你只使用 CSS,它只能通过多个@media
查询来实现。
漂亮,谢谢! W3C 应该评估这个问题。
@Lonely 好吧,是的 - 虽然我可以想象他们的论点是你已经能够做到(例如 JS)。但让我们看看未来会给我们带来什么!【参考方案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/
【讨论】:
亲爱的@GnzBzo,谢谢,但这是我目前的解决方法;我已经知道了。我想对更大的屏幕使用单个媒体查询。就这样。如果还不能,那也没关系。问题是关于使用缩放,其他一切都是次要的。【参考方案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>
【讨论】:
这是个好主意,但问题是结果不清晰 结果将与使用 zoom() 样式获得的一样清晰。在 sn-p 中,缩放将 div 放大数倍,因为我设置了一个任意示例。但是,如果您根据实际情况更改值,它将像缩放一样清晰 我已经试过了;不知道是不是我做错了什么,但是没那么锋利,不知道为什么? (macOS/Chrome)。它在 5K 时完全消失,不再可见。【参考方案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
【讨论】:
缩放系数不应该是静态的,它取决于屏幕分辨率。 @Lonely:如果你愿意,你可以在另一个媒体查询中指定一个不同的。 亲爱的@beerwin,这不是我问题的答案,我真的不明白为什么人们会支持它。我已经编辑了我的问题并开始了新的赏金活动。 嗨@beerwin,你能删除这个答案吗?谢谢!以上是关于如何根据屏幕宽度计算 CSS 缩放因子?的主要内容,如果未能解决你的问题,请参考以下文章