Change font size dynamically

Question

I have a responsive website.It works nice in full screen and mobile device size (on desktop or phone)
But when I change the size of the browser window some texts (mostly h1,h2.. sizes) interlaced with next text. It happens also at low resolution screens. You can see what i mean in those two screenshots:

I want to change font size dynamically, if possible only for some specific divs.
Is that possbile? How?

fiddle is here
code:

<div class="row">
    <div class="col s12 m3">
            <div class="card">
                <div class="card-image"  style="height: 227.25px;">
                    <div  id="dash_kullanicisayisi"  class="card-action  inside">
                        <h1 class="center-align"style="font-size:100px; font-weight:lighter">125</h1>
                    </div>
                </div>
                <div class="card-content grey lighten-3">
                    <span class=" card-title activator grey-text text-darken-4">Online kullanıcı </span> 
                    <p>Online</p>
                </div>
            </div>
        </div>

<div class="col s12 m3">
 <div class="card">
                <div class="card-image "  style="height: 227.25px;">


                    <div class="row valign-wrapper blue-text darken-4">
                        <div id="dash_max_in" class="col s10 push-s2">
                            <h1 class="valign right-align    red-text accent-4 " style="margin: 1.35rem 10px 0px 0px;">43.56</h1>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign"><h5 class="valign red-text accent-44" style="margin-left:10px"> Download </h5></span>
                        </div>
                    </div>

                    <div class="row valign-wrapper">
                        <div id="dash_max_out" class="col s10 push-s2">
                            <h1 class="valign right-align  indigo-text darken-4 " style="margin-right: 10px; margin-bottom: 0.68rem; margin-top: 0.68rem;">13.25</h1>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign  indigo-text darken-4"><h5 class="valign" style="margin-left:10px"> Upload </h5></span>
                        </div>
                    </div>

                </div>
                <div class="card-content grey lighten-3">
                    <span class="card-title activator grey-text text-darken-4">Maximum<i class="material-icons right tooltipped"  data-position="bottom" data-delay="50" data-tooltip="Yoğunluk için tıklayınız">more_vert</i></span>
                    <p>Günlük averaj</p>
                </div>
                <div class="card-reveal">
                    <span class="card-title grey-text text-darken-4">Maximum yoğunluk<i class="material-icons right tooltipped"  data-position="top" data-delay="50" data-tooltip="Yoğunluk için tıklayınız">close</i></span>
                    <div class="row valign-wrapper blue-text darken-4" style="margin-left: -1.5rem; margin-right: -0.5rem;">
                        <div id="dash_max_in" class="col s10 push-s2">
                            <h2 class="valign right-align  red-text accent-4" style="margin-right:-1rem;margin-left:-1.5rem">25.25</h2>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign"><h5 class="valign  red-text accent-4" style="margin-left:0px"> Download </h5></span>
                        </div>
                    </div>
                    <div class="row valign-wrapper indigo-text darken-4" style="margin-right:-1rem;margin-left:-1.5rem">
                        <div id="dash_max_out" class="col s10 push-s2">
                            <h2 class="valign right-align indigo-text darken-4" style="margin-left: -1.5rem; margin-right: -0.5rem; margin-bottom: 0.68rem; margin-top: 0.68rem;">20.22</h2>
                        </div>
                        <div class="col s2 pull-s10 valign-wrapper">
                            <span class="flow-text valign"><h5 class="valign" style="margin-left:10px"> Upload</h5></span>
                        </div>
                    </div>
                </div>
             </div>
     </div>
     </div>

Answer 1

A few ways to do this... You could consider using em for font size (http://kyleschaeffer.com/development/css-font-size-em-vs-px-vs-pt-vs/)

But may prefer to use media queries, an extremely helpful method of adjusting CSS per screen size. (your fiddle adjusted) For example:

h1
{
  font-size: 18px;
}
/*to change font on screens 800px wide and smaller*/
@media screen and (max-width: 800px)
{
  h1
  {
    font-size: 14px;
  }
}
/*to change font on screens 500px wide and smaller*/
@media screen and (max-width: 500px)
{
  h1
  {
    font-size: 12px;
  }
}

Answer 2

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0" />
<title>Font resize</title>
<style>
body {
    font-size:16px;
}
h1 {
    font-size:3.125em;
}
h2 {
    font-size:1.875em;
}
 @media screen and (max-width: 768px) {
 body {
font-size:13px;
}
}
 @media screen and (max-width: 640px) {
 body {
font-size:12px;
}
}
 @media screen and (max-width: 480px) {
 body {
font-size:11px;
}
}
</style>
</head>

<body>
<h1>Font Resize</h1>
<h2>Font Resize</h2>
</body>
</html>