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 charset=utf-8 />
  
  <title>ROOT EM! Using CSS3 "rem" Units for "Elastic Pixels"</title>
  
  <style>
    
    /* ---|  Elastic Pixels  |--- */
    html { 
      font-size: 6.25%;  /* scale down 1em == 1px (assuming the default browser font-size is 16px)  */
      -webkit-text-size-adjust:none; /* force Webkit to allow 1px font-size */
    } 
    body { 
      font-size: 16px; 
      font-size: 16rem; /* 16rem == 16px. Note: ALWAYS declare "rem" styles AFTER "px" styles */
    } 
    /* ---|    That's it!    |--- */
    
    
    div#info {
      font-size: 16px; /* no "rem" styles defined so content font-size is "fixed" (i.e. no zoom) */
      margin-top: 19px;
    }
    
    
    /* 
     * Lets have some fun...
     */
    h1   { 
      font-size: 24px; font-size: 24rem; 
    }
    
    div#box { 
      width: 10px; width: 10rem;
      height: 10px; height: 10rem;
      border: 1px solid #555; 
      border-width: 1rem;
      background-color: #ccc;
    }
    
    
    /* 
     * A Simple Template 
     */
    div#template {
      width: 100px; width: 100rem;
      height: 50px; height: 50rem;
      margin-top: 5px; margin-top: 5rem; 
      background-color: red;
    }
    
      #header {
        height: 10px; height: 10rem; 
        background-color: blue;
      }
    
      #wrapper {
        height: 30px; height: 30rem; 
        background-color: yellow;
      }
    
        #col1, #col2, #col3 {
          float: left;
        }
    
        #col1 {
          width: 30px; width: 30rem;
          height: 30px; height: 30rem; 
          background-color: orange;
        }
    
        #col2 {
          width: 40px; width: 40rem;
          height: 30px; height: 30rem; 
          background-color: purple;
        }
    
        #col3 {
          width: 30px; width: 30rem;
          height: 30px; height: 30rem; 
          background-color: pink;
        }
    
    
      #footer {
        height: 10px; height: 10rem; 
        background-color: green;
      }
    
    
    /* 
     * Resolution Independent Mobile UI
     * http://www.sencha.com/blog/resolution-independent-mobile-ui 
     * ...  yes you can (and should) still use % and em's!
     */
    
    a.button {
      text-decoration:none;
    }
    
    .button {
      display: inline-block;
      color: #fff;
    
      background-image: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#C1FA3B), color-stop(0.02, #8FCA05), to(#5A7F03));
      -webkit-border-radius: .2em;
      -webkit-box-shadow: #7EB105 0 0 .03em 0.03em inset, rgba(0, 0, 0, 0.4) 0px 0.1em .2em;
      text-shadow: rgba(0,0,0,.2) 0 .05em .02em;
      border: .08em solid #374D02;
      padding: .2em .6em;
      margin-top: .2em;
    }
    
    .size_2x {
      font-size: 200%;
    }
    
    .size_3x {
      font-size: 300%;
    }
    
  </style>
  
</head>
  
<body>
  
  
  <!-----|  Elastic Pixels TEST  |------>
  
  <h1>
    ROOT EM! Using CSS3 "rem" Units for "Elastic Pixels"
  </h1>
  
  <p>
    Oh look, 10 x 10 pixel box... Or is it?
  </p>
  
  <div id="box"></div>
  
  <p>
    Oh good, more rectangles!
  </p>
  
  <div id="template">
    <div id="header"></div>
    <div id="wrapper">
      <div id="col1"></div>
      <div id="col2"></div>
      <div id="col3"></div>
    </div>
    <div id="footer"></div>
  </div>
  
  <p>
    Buttons anyone?
  </p>
  
  <a href="#" class="button">1×</a>
  
  <div class="size_2x">
      <a href="#" class="button">2×</a>
  </div>
  
  <div class="size_3x">
      <a href="#" class="button">3×</a>
  </div>
​
  <!-----|         DONE!        |------>
​
  
  
  <div id="info">
    <hr />
    <p>
      <strong>Zoom:</strong>
      <button href="javascript:void(0);" onclick="window.zoomZoom(1)">Reset to 1x</button>
      <button href="javascript:void(0);" onclick="window.zoomZoom(2)">2x</button>
      <button href="javascript:void(0);" onclick="window.zoomZoom(3)">3x</button>
    </p>
    <hr />
    
    <h2>
      Ummm... <em>Elastic Pixels</em> WTF?
    </h2>
    <p>
      I <em>love</em> working in <code>px</code> units.
    </p>
    <p>
      But alas! <code>px</code> unit's don't <strong>scale</strong>... So we're stuck with the complexity of <code>%</code> and <code>em</code> units right?
    </p>
    <p>
      Wrong.
    </p>
    <p>
      Say hello to <code>rem</code>
    </p>
    
    <h2>
      Hello <code>rem</code>
    </h2>
    <p>
      CSS3 introduces <a href="http://www.w3.org/TR/css3-values/#numbers0">a few new units</a>, including the <code>rem</code> unit, which stands for "root em" (or "font size of the root element").
    </p>
    <p>
      Jonathan Snook, has a great explanation of <a href="http://snook.ca/archives/html_and_css/font-size-with-rem">Font Sizing with rem</a>.
    </p>
    
    <h2>
      Enter "Elastic Pixels"
    </h2>
    <p>
      By scaling the "root em" to 1px (a 1:1 em-to-px ratio) we get a "new" kind of unit... <em>ELASTIC PIXELS!</em>
    </p>
    <p>
      By increasing the single "root em" <code>font-size</code>, ALL our elastic pixel's increase!
    </p>
    
    <h2>Zoom Zoom</h2>
    <p>
      Zooming isn't as easy as it looks... John Resig (of jQuery fame), explains <a href="http://ejohn.org/blog/sub-pixel-problems-in-css/">Sub-Pixel Problems in CSS</a>...
    </p>
    <p>
      To cut a long story short; sticking to whole numbers avoids browser rounding bugs.
    </p>
    <p>
      1px * 2 = 2px - <em>magic!</em>
    </p>
    <p>
      What's the use of 2x zoom?
    </p>
    <p>
      More reading... <a href="http://www.webkit.org/blog/55/high-dpi-web-sites/">High DPI Web Sites</a> and <a href="http://www.smashingmagazine.com/2010/11/17/designing-for-iphone-4-retina-display-techniques-and-workflow/">Designing for iPhone 4 Retina Display: Techniques and Workflow</a>
    </p>
    
    <p>
      Skipped the reading? Me too... Basically, iOS resolutions:
      <ul>
        <li>
          320 × 480 (iPhone/iPod touch)
        </li>
        <li>
          640 × 960 (iPhone 4 and iPod with Retina display)
        </li>
      </ul>
    </p>
    
    <p>
      The iPhone 4 has <code>-webkit-min-device-pixel-ratio: 2</code> ...yep that's 1px * 2!
    </p>
    
    <h2>
      Adaptive Web Design
    </h2>
    <p>
      Screen DPI (really PPI) is something the Responsive / Adaptive Web Design community should care a whole lot about. With "Elastic Pixels" we might just be able to build layouts with the simplicity of <code>px</code>'s and scalability of <code>em</code>'s. <em>W00T!</em>
    </p>
    
    <h2>
      <code>rem</code> Support and Progressive Enhancement
    </h2>
    <p>
      Safari 5, Chrome, Firefox 3.6+, and even Internet Explorer 9! 
      ... Please help <a href="http://ahedg.es/w/rem.html"> test mobile and other browsers here</a>.
    </p>
    <p>
      By declaring <code>rem</code>'s <em>after</em> <code>px</code>'s in the CSS this example - should - degrade gracefully to the <code>px</code> unit when <code>rem</code> is not supported.
    </p>
      
    <h2>
      Shameless plug
    </h2>
    <p>
      Chris Jacob: <a href="http://twitter.com/_chrisjacob">@_chrisjacob</a>
    </p>
​
  </div>
​
</body>
</html>
 
​
Output

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

Dismiss x
public
Bin info
anonymouspro
0viewers