Use rems rem or ems em for text sizeDon't use pixels in your CSS, use 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.5rem; /* 24px ÷ 16px per rem */
}
.footnote {
font-size: 0.5rem; /* 8px ÷ 16px per rem */
} |
Use ems rem or em for container sizesUse ems rem or em 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: 50em50rem; /* 800px ÷ 16px per emrem */
max-width: 64em64rem; /* 1024px ÷ 16px per emrem */
}
.sidebar {
width: 12em; /* 200px ÷ 16px per emrem */
}
|
Use CSS to help images scaleIf 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: 30em30rem;
height: 5em5rem;
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 |