Current screen width indicator in EMs (useful for knowing when to add breakpoints when resizing browser window)

application.js

function showEms() {
	var windowWidth = $(window).width();
	var bodyFontSize = $('body').css('font-size');
	var bodyFontSizeWithoutPx = parseInt(bodyFontSize);
	var emValue = windowWidth/bodyFontSizeWithoutPx;
	$('.screen-width').text(' ' + emValue + 'em');
}

// or you could do 

var showEms = function(){
  var em_value = $(window).width() / parseInt($('body').css('font-size'));
  $('.screen-width').text(' ' + em_value + 'em');
  return true;
};

// call the function

$(document).ready(function() {
	showEms();
});

$(window).resize(function() {
	showEms();
});

style.css

.emBox {
	position: fixed;
	padding: 0.41667em 0.83333em;
	background: #474747;
	color: white;
	font-weight: bold;
	font-size: 1em;
	bottom: 0;
	left: 0;
	border-radius: 0 0.41667em 0 0;
}

view.html

<div class="emBox">
	<span class="screen-width">0</span>
</div>