title: Responsive CSS relative to default CSS
body: <p>I am not sure if this is entirely possible. Want to check here.</p>
  
  <p>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?</p>
  
  <pre><code>.text p span{
        font-size:40px;
  }
  @media screen and (max-width: 640px){
     .text p span{
        font-size: &lt;0.8*40px&gt;;
     }
  }
  @media screen and (min-width: 641px) and (max-width: 1024px){
     .text p span{
        font-size: &lt;0.6*40px&gt;;
     }
  }
  </code></pre>
  
  <p>The reason I am not setting px values is because <code>.text p span</code> 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? </p>