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

【问题标题】：Pure CSS if/ else statement involving custom unit of size variables纯 CSS if/else 语句涉及自定义大小单位变量
【发布时间】：2016-05-13 03:39:28
【问题描述】：

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

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

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

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

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

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

【问题讨论】：

CSS 没有 if/then 语句。它拥有的是由选择器和/或媒体查询选择的多个规则。你听说过媒体查询吗？如果没有，请返回并复习您的基本 CSS。

标签： css variables conditional viewport-units

【解决方案1】：

使用media queriesmax-width。示例：

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

:root{
  --cwv: 100vw;
}

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

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

最后，示例的黑条将设置为 --cwx 的 ½，即视口宽度的 ½，但不小于 830px 的 ½ (=415px)：

: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);
}

【讨论】：

【解决方案2】：

像下面这样使用媒体查询来获取窗口大小

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

  /* your code */

 }

【讨论】：