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>
    <p>Resize me, and try to reach exactly 320px to see what happen.</p>
    <span data-devicewidthcontent></span>
  </div>
</body>
</html>
 
/* Mobile styles applied everywhere */
.element {
  color: white;
  background: #0D0D0D;
}
​
@media (min-width: 320px) {
  /* Override above and at 320px */
  .element {
    color: #0D0D0D;
    background: inherit;
  }
}
​
​
 
displayDeviceWidth();
window.onresize = displayDeviceWidth;
​
function displayDeviceWidth() {
  var width = (window.innerWidth > 0) ? window.innerWidth : screen.width;
  var elements = document.querySelectorAll('[data-devicewidthcontent]');
  for (var i=elements.length-1; i>=0; i--) {
    elements[i].innerHTML = '<em style="color:#AAA">(device width: '+width+'px)</em>';
  }
}
Output

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

Dismiss x
public
Bin info
tzipro
0viewers