Skip to content

Instantly share code, notes, and snippets.

@jerrylau91

jerrylau91/correct use "em" with "rem" without "px"

Last active March 7, 2016 07:15
Show Gist options
  • Save jerrylau91/feab5d485a1b56a9e74c to your computer and use it in GitHub Desktop.
Save jerrylau91/feab5d485a1b56a9e74c to your computer and use it in GitHub Desktop.
Download ZIP

Revisions

  1. jerrylau91 revised this gist Jan 19, 2016. 1 changed file with 1 addition and 2 deletions.
    3 changes: 1 addition & 2 deletions correct use "em" with "rem" without "px"
    View file
    Original file line number Diff line number Diff line change
    @@ -1,4 +1,4 @@
    ```css

    :root {
    font-size: 16px;
    }
    @@ -44,4 +44,3 @@ button {
    }
    }
    }
    ```
  2. jerrylau91 revised this gist Jan 19, 2016. 1 changed file with 3 additions and 1 deletion.
    4 changes: 3 additions & 1 deletion correct use "em" with "rem" without "px"
    View file
    Original file line number Diff line number Diff line change
    @@ -1,3 +1,4 @@
    ```css
    :root {
    font-size: 16px;
    }
    @@ -42,4 +43,5 @@ button {
    font-size: 1.375rem;
    }
    }
    }
    }
    ```
  3. jerrylau91 created this gist Jan 19, 2016.
    45 changes: 45 additions & 0 deletions correct use "em" with "rem" without "px"
    View file
    Original file line number Diff line number Diff line change
    @@ -0,0 +1,45 @@
    :root {
    font-size: 16px;
    }

    // Or you can use html
    // html {
    // font-size: 16px;
    // }

    body {
    font-size: 1rem;
    }

    button {
    font-size: 0.875rem;
    // All the internal/external value use in 'em'
    // This value use of your "font-size" as the basic font size
    // And you will not have any problem with the font size of the container ( Example bottom )
    padding: .5em 1em;
    border: .125em solid #e3e3e3;
    @media (min-width: 48rem){ // min-width: 768px
    font-size: 1.125rem;
    }
    @media (min-width: 62rem){ // min-width: 992px
    font-size: 1.375rem;
    }
    }

    // Example:
    .container {
    // font-size: 14px;
    font-size: .875rem;
    width: 80rem;
    button {
    font-size: .875rem; // Still use font-size: 14px
    padding: .5em 1em;
    border: .125em solid #e3e3e3;
    @media (min-width: 48rem){ // min-width: 768px
    font-size: 1.125rem;
    }
    @media (min-width: 62rem){ // min-width: 992px
    font-size: 1.375rem;
    }
    }
    }