How do I make a font-size be "75% of what it otherwise would've been"

Question

Basically, what I want is for all font-sizes on mobile to be reduced to 75% of that they otherwise would. For example, if a p is 10px then on mobile it will be 7.5px.

So how do I do

@media (max-width: 767px)
{
    body { font-size: 0.75whateveritwouldbeotherwise; }
}

Answer 1

Use em units.

https://jsfiddle.net/wha9dh0j/

<div>test</div> //2em = twice the size of inherited size
<div>test</div> //body font, 30px
<div>test</div> //0.5em = half the size of inherited size

body{
  font-size:30px;
}

div:first-child{
  font-size:2em;
}

div:last-child{
  font-size:0.5em;
}