纯CSS if / else语句涉及大小变量的自定义单位

Question

我只想使用纯CSS 来解决我的问题。 这是我有问题的代码：

@if (100vh > 830px) {:root { --cwv:100vh;}}
@else {:root { --cwv: 830px;}}

我正在尝试做的事情：如果浏览器窗口大小小于830px，则“--cvw”（自定义宽度变量/单位）应相对 _{（另一个问题是我的代码可能有）}到830px而不是100vw _{（内置视口“垂直宽度”单位）}，因为页面上的元素太小了。

我知道我可以使用其他多种方法来解决使用其他语言的问题，但我只是想知道如何使CSS代码工作 - 正如它应该的那样 - 根据我研究过的地方：

• CSS custom properties (variables) - 声明变量以下列方式声明：:root{--variable-name: variable-value;}

• CSS Conditionals (if/ else statements)

我做错了什么？我希望我的代码_{（我上面提供的）}中有多个语法错误......：/

Answer 1

使用media queries max-width。 例如：

默认--cwx设置为视口宽度：

:root{
  --cwv: 100vw;
}

如果视口宽度小于或等于830px，请将--cwx设置为830px：

@media all and (max-width: 830px){
  :root{
    --cwv: 830px;
  }
}

最后，示例的黑条将设置为--cwx的½，因此视口宽度的½，但不小于830px （= 415px）的1/2 EM>：

:root{
  --cwv: 100vw;
}
@media all and (max-width: 830px){
  :root{
    --cwv: 830px;
  }
}

body{
  margin: 0;
}

:root::after{
  content: "";
  display: block;
  background: black;
  height: 10px;
  width: calc(var(--cwv) * .5);
}

Answer 2

使用媒体查询获取如下所示的窗口大小

@media screen and (min-width : 830 px) {

  /* your code */

 }