在 calc (css) 中使用 screen.width

Posted 2023-03-06

技术标签:

【中文标题】在 calc (css) 中使用 screen.width【英文标题】：Use screen.width inside calc (css) 【发布时间】：2018-01-17 09:19:58 【问题描述】：

有没有在calc 中使用screen.width？像这样的：

 left: calc(250px + screen.width - 1024px)!important;

这是针对@media(max-width: 1024px) 不起作用的具体情况。

【问题讨论】：

【参考方案1】：

100vw = 100% 的视口宽度

left:calc(250px + 100vw - 1024px)!important;

【讨论】：

【参考方案2】：

您可以使用vw 单位来调整与视口宽度相关的大小，所以试试这个：

left: calc(250px + 100vw - 1024px) !important;

【讨论】：

【参考方案3】：

left: calc(250px + 100vw - 1024px)!important; 这可能行不通我会这样做：calc(100vw - 774px); (1024 - 250 = 774)

vw - 视图宽度

【讨论】：

【参考方案4】：

Afaik 无法在计算公式中获得“实际视口宽度”:(

【讨论】：

甚至没有像其他三个几乎相同的答案中看到的“vw”单位，意思是“视口宽度”？最终设法让它工作，它只是与方程式中的各种单位混淆

以上是关于在 calc (css) 中使用 screen.width的主要内容，如果未能解决你的问题，请参考以下文章