Setting html font-size in WordPress proportional to the viewport width

I've created a template in WordPress and I want the page it generates to scale as the viewport size changes. I've done this outside of WordPress by first expressing all my units in rems and then  setting the html font-size proportional to the viewport size by placing the code below in the DOM Ready section:

var viewport_width = $( window ).width();  // Returns width of the current browser viewport
		if (viewport_width < 1400) {	        
			font_pc = (viewport_width / 1400) * .625 * 100);   
			$(html).css("font-size", font_pc + '%');
		}

Select allOpen in new window

Actually this starts the scaling when the viewport is < 1400px and  In this example, if the viewport were 1200px font_pc would e 53.6% and that would become the html element font-size, reducing everything expressed in rems.

My question is, how can I pull this off for a WordPress template php file?

Thanks