Skip to content

Instantly share code, notes, and snippets.

@jkva
Created January 29, 2018 13:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save jkva/6ff25653e6b3a9ad03b58214a297dfc5 to your computer and use it in GitHub Desktop.
Save jkva/6ff25653e6b3a9ad03b58214a297dfc5 to your computer and use it in GitHub Desktop.

Add this as a bookmark to get a small span fixed to the top-right of the viewport. I use this to find breakpoints in designs, comments welcome.

javascript:((w, d) => {
const el=d.createElement('span'),calc=()=>{const a=w.getComputedStyle(d.body).getPropertyValue('font-size').match(/(\d+)/)[1],b=parseInt(w.innerHeight/a)+'em',c=parseInt(w.innerWidth/a)+'em';el.textContent=c+' '+b};el.style.cssText='position: fixed; right: 0; top: 0; background-color: #000; color: #fff; padding: .2em; z-index:9001',d.body.appendChild(el),w.addEventListener('resize',calc),calc();
})(window, document);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment