• Resolved befree22

    (@befree22)


    In 2012 theme, I’m seeing 2 types of measurements for the same css element. Ex.

    .main-navigation {
      margin-top: 24px;
      margin-top: 1.714285714rem;

    Why is this? I use pixels (px) but why is rem also included? Don’t all browsers and platforms recognize pixels?

Viewing 1 replies (of 1 total)
  • These notes are from the stylesheet of twentytwelve:

    This stylesheet uses rem values with a pixel fallback. The rem
    values (and line heights) are calculated using two variables:

    $rembase: 14;
    $line-height: 24;

    ———- Examples

    * Use a pixel value with a rem fallback for font-size, padding, margins, etc.
    padding: 5px 0;
    padding: 0.357142857rem 0; (5 / $rembase)

    * Set a font-size and then set a line-height based on the font-size
    font-size: 16px
    font-size: 1.142857143rem; (16 / $rembase)
    line-height: 1.5; ($line-height / 16)

    ———- Vertical spacing

    Vertical spacing between most elements should use 24px or 48px
    to maintain vertical rhythm:

    .my-new-div {
    margin: 24px 0;
    margin: 1.714285714rem 0; ( 24 / $rembase )
    }

    ———- Further reading

    https://snook.ca/archives/html_and_css/font-size-with-rem
    https://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/

Viewing 1 replies (of 1 total)
  • The topic ‘question about px and rem measurement’ is closed to new replies.