Question

#foo{font-size:14px;}

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

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

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

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

Answer 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）。

Answer 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 */
}

Answer 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)
}
```

CSS值可以相对改变吗？

3 个答案: