Edit in JSFiddle

<h1>Understanding the difference between EM, PX, %age and PT<br> - <a href="http://aamirshahzad.net">Aamir Shahzad</a></h1>

<p>Let's understand Pixel's philosophy by a jsfiddle coding example. Resize output window to check <b>PX</b> in action.</p>

body {
    font-family: calibri, arial;
    font-size: 14px;
}
h1 {
    font-size: 48px;
}
h1 a {
    text-decoration: none;
}
h3 {
    font-size: 36px;
}
p {
    font-size: 24px;
}
@media (min-width:768px) and (max-width: 1024px) {
    h1 {
        font-size: 36px;
    }
    h3 {
        font-size: 28px;
    }
    p {
        font-size: 18px;
    }
}
@media(max-width: 768px) {
    h1 {
        font-size: 28px;
    }
    h3 {
        font-size: 24px;
    }
    p {
        font-size: 14px;
    }
}