A Pen by Jeff S..

index.html

<header>
  <p>basic styles, screen width: <span></span></p>
</header>
<article class="clearfix">
  <h1 class="h">h1 - Super Big Header Text</h1>
  <h2 class="h">h2 - Normal Page Title Header Text</h2>
  <h3 class="h">h3 - Header Text</h3>
  <h4 class="h">h4 - Header Text</h4>
  <h5 class="h">h5 - Header Text</h5>
  <h6 class="h">h6 - Header Text</h6>
  <p class="h">p - Lorem ipsum dolor Nic Cage <a href="">ammet</a> volaris...</p>
</article>

Media-Queries-test.markdown

Media Queries test

A Pen by Jeff S. on CodePen.

License.

script.js

$( window ).resize(function() {
  resize('header p span');
  fontsize('.h');
});

resize = function (el) {
  var width = self.innerWidth;
  $(el).text(width);
};
resize('header p span');

fontsize = function (el) {
  var fsize;
  $(el).each(function () {
    fsize = $(this).css('font-size');
    $(this).attr('data-content',fsize);
  });
//  $(this).attr('data-content',fsize);
};
fontsize('.h');

style.css

.a {background:yellow;}
.h:after{content:attr(data-content); margin-left:0.5em; color:grey;}
@media only screen {
  h1 {font-weight:300; font-size: 1.438em; /* 23/16 */}
  h2 {font-weight:600; font-size: 1.188em; /* 19/16 */}
  h3 {font-size: 1.125em; /* 18/16 */}
  h4 {font-size: 1em; /* 16/16 */}
  h5 {font-weight:600; font-size: 0.875em; /* 14/16 */}
  h6 {font-size: 0.750em; /* 12/16 */}
  p {font-size: 0.875em; /* 14/16 */}
}
@media only screen and (min-width:768px) {
    /* Tablet */
    h1 {font-size: 1.875em; /* 30/16 */}
    h2 {font-size: 1.313em; /* 21/16 */}
    h3 {font-size: 1.250em; /* 20/16 */}
    h4 {font-size: 1.125em; /* 18/16 */}
    h5 {font-size: 1em; /* 16/16 */}
    h6 {font-size: 0.875em; /* 14/16 */}
    p, ol, ul, dl {font-size: 1em; /* 14/16 */}
}
@media only screen and (min-width:768px) and (orientation:portrait) {
    /* Tablet PORTRAIT */
}
@media only screen and (min-width:768px) and (orientation:landscape) {
    /* Tablet LANDSCAPE */
}