Skip to content

Instantly share code, notes, and snippets.

Show Gist options
  • Save jordanmoore/3144159 to your computer and use it in GitHub Desktop.
Save jordanmoore/3144159 to your computer and use it in GitHub Desktop.
Current screen width indicator in EMs (useful for knowing when to add breakpoints when resizing browser window)
<script>
$(window).resize(function() {
var windowWidth = $(window).width();
var bodyFontSize = $('body').css('font-size');
var bodyFontSizeWithoutPx = parseInt(bodyFontSize);
var emValue = windowWidth/bodyFontSizeWithoutPx;
$('.screen-width').text(emValue + 'em');
});
</script>
<div id="debug" style="position:fixed;padding:0.3em 0.6em;background:#f1f1f1;font-size:0.6em;bottom:0;left:50%;">
<span class="screen-width">0</span>
</div>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment