Versions Compared

Old Version 6

changes.mady.by.user Anastasia Cheetham

Saved on

compared with

New Version 7

changes.mady.by.user Jonathan Hung

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.


Div
classa11y-checks

Use rems or ems for text size

Don't use pixels in your CSS, use ems rem or em instead. Pixels will not scale if a user stylesheet is applied to the page, or if the page is viewed on a small screen.

  • Set the base font size to 100%.
  • Calculate the desired ems for particular element by dividing the desired pixels by the base font size, which is typically 16px.


Code Block

body: {
    font-size: 100%;
}
h1 {
    font-size: 1.5em5rem; /* 24px ÷ 16px per emrem */
}
.footnote {
    font-size: 0.5em5rem; /* 8px ÷ 16px per emrem */
}

Use ems for container sizes

Use ems for the document width, column widths and any other dimensions that affect the layout of the page. If you use ems for text and pixels for the container of that text, then enlarging the font will just squish the text into a tiny space.


Code Block

body: {
    min-width: 50em; /* 800px ÷ 16px per em */
    max-width: 64em; /* 1024px ÷ 16px per em */
}
.sidebar {
    width: 12em; /* 200px ÷ 16px per em */
}


Use CSS to help images scale

If you are using a background image for anything, set the CSS background-size property to allow the image to scale when the element scales.


Code Block

.banner {
    width: 30em;
    height: 5em;
    background-image: url('images/banner.png');
    background-size: contain; /* scale image to fit container */
}
.sidebar {
    background-image: url('images/sidebar-accent.png');
    background-size: 50% 100%; /* half the width and the full height of the container */
}


See Also

...