Responsive CSS relative to default CSS - html

Question

I am not sure if this is entirely possible. Want to check here.
Basically what I am trying here is to have a default font size (say 40px). when a media query kicks in I want to change it to reduce to 80% of default font size. Is that possible?
.text p span{
font-size:40px;
}
#media screen and (max-width: 640px){
.text p span{
font-size: <0.8*40px>;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.text p span{
font-size: <0.6*40px>;
}
}
The reason I am not setting px values is because .text p span gets different class names which will have different font sizes. But they need to scale down in the same ratio. Am I trying that's not achievable?

Answer 1

You could use em, like this, where you set a default on the body, or on any parent you want to inherit font-size from, and adjust from there
Also rem and % is possible alternatives, it all comes down to markup structure etc.
em is relative to its direct or nearest parent, rem is relative to the html (root) - their font-size.
body {
font-size: 20px;
}
.text p span {
font-size: 2em;
}
#media screen and (max-width: 640px) {
.text p span {
font-size: 1.6em;
}
}
#media screen and (min-width: 641px) and (max-width: 1024px) {
.text p span {
font-size: 1.2em;
}
}
<div class="text">
<p>
<span>
Hey there ...
</span>
</p>
</div>
With rem one can do like this
html {
font-size: 40px;
}
.sampleClass {
font-size: 20px;
}
#media screen and (min-width: 641px) and (max-width: 1024px){
.sampleClass span {
font-size: 0.8rem;
}
}
#media screen and (max-width: 640px){
.sampleClass span{
font-size: 0.6rem;
}
}
<p class="sampleClass">
This is 20px
<span>This is relative to the html element when #media kicks in</span>
</p>

Answer 2

I'm not the biggest fan of ems but if you only want to reduce to 80% use .8em as your strong override of the .text p span size you have set.
#media screen and (max-width: 640px){
.text p span{
font-size: .8em;
}
}

Answer 3

It might be worth looking into Sass/Scss for setting variables and having operators applied to them. You can set your variables at the start of your stylesheet, and when you compile your .sass or .scss file, it outputs the correct number in your .css file
http://sass-lang.com/guide#topic-8

Answer 4

It is entirely possible and as you can probably tell there is a number of ways to achieve this. The technique I use is very simple:
Set the font-size on the body and html elements in px, as well as any media query to step the font size up or down, in px.
Use rem units to set the font-size where you need. rem stands for root em, where root is the topmost element in the DOM, usually html or body.
Example:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
/*
The rem values use 18px or 15px as the base unit
depending on matching query.
In this case there is no need to use 1rem unless you need to reset
a previously changed value.
*/
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
Using rem makes it very easy (for me at least) to reason about relative sizes.
em on the other hand is very useful if want a value to be affected by the font-size of the closest parent element.
For example if you wanted to have a padding that scales proportionally to the text size of a .heading, then you'd use em:
html, body {
font-size: 18px;
}
#media screen and (max-width: 320px) {
html, body {
font-size: 15px;
}
}
.heading { font-size: 1.2rem; }
.small { font-size: 0.8rem; }
/*
Now you define a padding that is always 80% of the element's
font-size.
And since .heading is set at 1.2rem, the padding will be
80% of 1.2rem.
*/
.heading { padding: 0.8em; }