Can CSS values changed relatively? - html

Question

#foo{font-size:14px;}
Now #foo has 14px font size
#foo{font-size:$-2px} // Hypothetical code
Now #foo has 12px font size. (14px - 2px)
Is this possible by any means? To dynamically change the value of a selector.

Answer 1

You can use rem which will refer to the global font-size.
: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>
EXPLANATION
The rem will refer to the global css. So when processing (1rem - 2px), this is actually (14px - 2px).

Answer 2

1. Using calc() method
I don't understand what do you mean by dynamically changed. But to do relative calculation, use calc() method.
Example:
width: calc(100% - 80px);
2. Using preprocessor like SASS
You might also want to check Sass for preprocessing. One of the well supported features are, variables.
You can define variables and do some calculations.
$body-size: 200px;
body {
width: $body-size/2 ;
}
Here is a simple example I created: jsfiddle
Reference: SASS
3. Using jQuery
The OP mentioned about changing the sizes whenever the window size changed. One approach would be using jQuery
$(window).resize(function() {
var width = $(window).width();
var height = $(window).height();
$('#item').width(width);
});
4. Using vw and vh attributes
The OP mentioned about wanting to change the sizes according to the viewport in the comment.
vw and vh is relative to the viewport width and height respectively.
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

My $ 2/100.
CSS as of now, doesn't allow cross-browser variables in truest of sense, but you may be interested in this CSS Variables Official Doc.
CSS not supporting variables, is one of the most important reason CSS Preprocessors exist. eg. SASS, LESS.
You can use font-size and then relative em to control some of the elements properties, but its somewhat whaky, and you will end up having to individually specify font-sizes on children elements.
.example {
font-size: 20px;
border-radius: .5em; // 10px (20*.5)
padding: 2em; // 40px (20*2)
}