Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="" />
<meta charset=utf-8 />
<title>Line-height units - Fixed units demo</title>
</head>
<body>
  <p style="color:#2BA6CB; padding-bottom:1em;margin-bottom:2em;border-bottom: 2px dashed #2BA6CB;">This is a demo playground for the article "<a href="https://tzi.fr/css/prevent-double-breakpoint" style="color:#FB6418">Prevent double breakpoint</a>" by tzi.</p>
  
  <div class="element">
    <p>I am an element that have a grey background on tiny screens.</p>
    <span data-devicewidthcontent></span>
  </div>
</body>
</html>
 
@media (max-width: 19.99em) {
  /* Applied below and at 319,84px with zoom 1 */
  .element {
    color: white;
    background: #0D0D0D;
  }
}
​
@media (min-width: 20em) {
  /* Applied above and at 320px with zoom 1 */
  .element {
    color: #0D0D0D;
  }
}
​
​
 
displayBrowserData();
window.onresize = displayBrowserData;
​
function displayBrowserData() {
  var elements = document.querySelectorAll('[data-devicewidthcontent]');
  for (var i=elements.length-1; i>=0; i--) {
    elements[i].innerHTML = '<em style="color:#AAA">(device width: '+getDeviceWidth()+'px - text zoom: '+getBrowserTextZoom( )+')</em>';
  }
}
​
function getElementFontSize( ) {
    return parseFloat(getComputedStyle(document.documentElement).fontSize);
}
​
function getDeviceWidth( ) {
    return (window.innerWidth > 0) ? window.innerWidth : screen.width;
}
function getBrowserTextZoom( ) {
    return getElementFontSize( )/16;
}
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
tzipro
0viewers