CSS值可以相对改变吗？答案

【问题标题】：Can CSS values changed relatively?CSS值可以相对改变吗？
【发布时间】：2016-01-21 13:22:02
【问题描述】：

#foo{font-size:14px;}

现在 #foo 的字体大小为 14px

#foo{font-size:$-2px} // Hypothetical code

现在 #foo 的字体大小为 12px。 (14px - 2px)

这有可能吗？动态改变选择器的值。

【问题讨论】：

您可以使用 em - 相对于父级。例如，如果 font-size:1.5em 意味着它将是父字体大小的 1.5 倍。此外，如果您需要实际计算，我建议使用 less 或 sass。
Css 目前没有任何方法可以修改相对于当前值的值。我们可以使用 javascript。
嗯.. 你可以发布任何带有示例的链接，或者我可以从哪里开始？
但是我们有一些相对单位，例如 em、ex、rem 等，可能会有一些用处。
font-size: smaller

标签： html css

【解决方案1】：

您可以使用rem 来引用全局字体大小。

:root
{
  font-size : 14px;
}

#foo
{
  font-size : calc(1rem - 2px);
}

<div>
  I am a 14px text according to the root font-size
</div>
<div id="foo">
  I am a 12 pixel text according to the rem font-size
</div>

解释

rem 将引用全局 css。所以在处理(1rem - 2px)的时候，其实就是(14px - 2px)。

【讨论】：

嗯，即使您是正确的，这也是对我的一般问题的自定义答案。你写的这个 sn-p 只适用于完全相同的东西。不幸的是，它没有提供直接的解决方案，因为也许没有。也许使用 SASS/LESS。不过，感谢您的宝贵时间！
Indead，在处理复数微积分时，SASS 显示出强大的功能。这是该技术的极限。

【解决方案2】：

1.使用 calc() 方法

我不明白动态更改是什么意思。但要进行相对计算，请使用calc()方法。

例子：

width: calc(100% - 80px);

2。使用像 SASS 这样的预处理器

您可能还想检查Sass 进行预处理。受良好支持的功能之一是变量。

您可以定义变量并进行一些计算。

$body-size: 200px;

body {
  width: $body-size/2 ;
}

这是我创建的一个简单示例：jsfiddle

参考：SASS

3.使用 jQuery

OP 提到了在窗口大小改变时改变大小。一种方法是使用 jQuery

$(window).resize(function() { 
    var width = $(window).width();
    var height = $(window).height();

    $('#item').width(width);
});

4.使用vw 和vh 属性

OP提到要根据评论中的视口更改尺寸。

vw 和 vh 分别相对于视口的宽度和高度。

div.responsive {
   width: 10vw; /* 10% of viewport width */
   height: 10vh; /* 10% of viewport height */
   background-color: black; /* Just to make it visible while testing */
}

【讨论】：

这对我帮助不大，因为 calc 用于已知值。我想使用无法知道第一个值（在我的示例中为 14px 值）的代码。
也许“动态”这个词不合适。我试图解释如果可以使用 CSS 或任何其他方式来更改选择器的值而不知道它已经具有的值。我不知道#foo 的字体大小为 14px。但我希望它拥有它已经拥有的值的 -2px。
@dominotrix：你怎么不知道#foo 的大小？它设置在某个地方吗？也许你可以在 Sass 中使用变量。然后将大小重置为 $variable -2px。更新
这将有助于构建网站的响应能力。对于视口减少的每 100 像素，我希望 #foo 选择器从当前值中减去 100 像素。那不需要我编写媒体查询：[at]1200px {width:600px} - [at]1100px {width:500px} ... 等等。而且我不知道如何安装 SASS 或 LESS。
@dominotrix：我相信你可以用 calc 做到这一点。计算（100%-100px）

【解决方案3】：

我的 2/100 美元。

到目前为止，CSS 不允许真正意义上的跨浏览器变量，但您可能对此CSS Variables Official Doc 感兴趣。
CSS 不支持变量，这是 CSS 预处理器存在的最重要原因之一。例如。 SASS, LESS.
您可以使用font-size，然后使用相对em 来控制一些元素属性，但它有些不稳定，您最终将不得不单独指定子元素的字体大小。
```
.example {
    font-size: 20px;
    border-radius: .5em; // 10px (20*.5)
    padding: 2em; // 40px (20*2)
}
```

【讨论】：