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="REM as a workaround for LESS vars in media queries" />
<meta charset=utf-8 />
<title>JS Bin</title>
</head>
<body>
  <div class="myElement">
    <h1>Test header</h1>
    <p>Nullam quis risus eget urna mollis ornare vel eu leo. Donec ullamcorper nulla non metus auctor fringilla. Donec sed odio dui. Curabitur blandit tempus porttitor.</p>
​
        <img src="http://lorempixel.com/400/400/sports/Dummy-Pic/" alt="Dummy Pic" />
    
    <p>Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Maecenas sed diam eget risus varius blandit sit amet non magna. Morbi leo risus, porta ac consectetur ac, vestibulum at eros. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.</p>
​
    <p>Integer posuere erat a ante venenatis dapibus posuere velit aliquet. Aenean lacinia bibendum nulla sed consectetur. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Etiam porta sem malesuada magna mollis euismod. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Nulla vitae elit libero, a pharetra augue. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit.</p>
  </div>
    <script src="https://raw.github.com/chuckcarpenter/REM-unit-polyfill/master/js/rem.js"></script>
</body>
</html>
​
 
@myVar: 0.77rem; // gives 10px, 20px, 30px
​
html { font-size: 13px }
@media screen and (min-width: 480px) and (max-width: 767px) {
    html { font-size: 26px }
}
@media screen and (min-width: 768px) {
    html { font-size: 39px }
}
​
.myElement {
    padding: @myVar;
}
​
/* Beautification */
html, body {margin: 0; padding: 0}
body {
  font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
h1 {
  background: #ff9900;
  margin: (2 * @myVar) 0;
  padding: @myVar;
}
.myElement img {
  float: right;
  width: 10 * @myVar;
  height: 10 * @myVar;
  margin: 0 0 @myVar @myVar;
}
p {
  margin: @myVar 0;
}
​
Output

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

Dismiss x
public
Bin info
mishunovpro
0viewers