Use rem or em for text size
Don'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.
body: {
font-size: 100%;
}
h1 {
font-size: 1.5rem; /* 24px ÷ 16px per rem */
}
.footnote {
font-size: 0.5rem; /* 8px ÷ 16px per rem */
}
Use rem or em for container sizes
Use 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.
body: {
min-width: 50rem; /* 800px ÷ 16px per rem */
max-width: 64rem; /* 1024px ÷ 16px per rem */
}
.sidebar {
width: 12rem; /* 200px ÷ 16px per rem */
}
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: 30rem;
height: 5rem;
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 */
}
Use Flexbox Layouts
Using Flexbox layouts can simplify the positioning and wrapping of content across different screen and client window sizes. Flexbox works by specifying regions which are flexible, and then define the behaviour of each sub-container when it's flexed.
See the flexbox guide on CSS Tricks for additional information.