Documentation for a historical release of Infusion: 1.4
Please view the Infusion Documentation site for the latest documentation, or the Infusion 1.3. Documentation for the previous release.
If you're looking for Fluid Project coordination, design, communication, etc, try the Fluid Project Wiki.

How to make your page more responsive

Owned by Anastasia Cheetham
Last updated: Jul 04, 2012Version comment
2 min read

Use ems for text size

Don't use pixels in your CSS, use ems 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.
body: {
    font-size: 100%;
}
h1 {
    font-size: 1.5em; /* 24px ÷ 16px per em */
}
.footnote {
    font-size: 0.5em; /* 8px ÷ 16px per em */
}

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.

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.

.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