CSS REMS Example

css.mkd

#target / context = result

http://caniuse.com/#search=rem

Example ::

---

html {
 font-size: 16px;
}

body {
    font-family: Georgia, Times, serif;
    line-height: 1.4;
    color:#333;
    }

article {
    width:80%;
    max-width:800px;
    margin: auto;
}

h1 {
    font-size:55px;
    line-height:55px;
    margin:55px 0 0 0;
    text-align: center;
}

---

eq ex: 55 / 16 = 3.437

---

-- Converted to REM -----------------

html {
   font-size: 100%
}

body {
    font-family: Georgia, Times, serif;
    line-height: 1.4;
    color:#333;
    }

article {
    width:80%;
    max-width:800px;
    margin: auto;
}

h1 {
    font-size:3.437rem; /*55 /16 */
    line-height:3.437rem; /* 55 / 16 */
    margin:1em 0 0 0; /* 55 / 16 */
    text-align: center;
}