Media query vs base-font-size

HTML

<div class="wrap">
<p class="x">blabla</p>
<p class="y">blabla</p>
</div>

CSS

html {
	font-size: 62.5%; /*setting the base font size to 10px*/
  font-size:12px;
  margin: 0;
}
body {
  background: white;
  margin: 0;
}
.wrap {
    font-size: 24px;
    width: 40rem; /* 480px = 40 x 12px */
    background: #5fb;
}
.x { 
  font-size:6em; /* 144px = 24px x 6 */
}
.y { 
  font-size:6rem; /* 72px = 12px x 6 */
}

@media only screen and (min-width: 30rem) { /* 480px = 30 x 16px */
  body {
    background:red;
  }
  
 @media only screen and (min-width: 40rem) { /* 640px = 40 x 16px */
  body {
    background:cyan;
  }
  
  @media only screen and (min-width: 50rem) { /* 800px = 50 x 16px */
  body {
    background:yellow;
  }

JavaScript

$(document).ready(function(){
    $(window).resize(function(){
        $("span").text($( document ).width() + "px");
    });
});