title: How to change CSS id property depending upon screen size
body: <p>I do know how to use media-screen functionality, but wanna ask you guys something else, something which I really needed for my project. Let me paste some code snippet so that I can elaborate you exactly what I'm looking for.
  In below I'm pasting a css ID which I made for my site design:</p>
  
  <pre><code>#Disp_name {
  color: #424854;
  font-family: 'Open Sans',sans-serif;
  font-size: 5.5em;
  font-weight: bold;
  line-height: 105px;
  /*margin: 200px 0 25px;*/
  margin: 0px 0 25px;
  text-rendering: optimizelegibility;
  transition: color 0.3s ease 0s; }
  </code></pre>
  
  <p>Now I want when anyone open up my project from a small screen device, like
  **When open up from 400> and &lt;450px the font-size will be  4em and if >300 and &lt;400px then 3em and if less than &lt;300px then 2em.</p>
  
  <p>What should I do? Please help</p>