CSS media queries are great for reshaping websites for any device, making them "responsive". There is still some work to do though, particularly in regard to content.
In addition to media such as images, the text content also becomes a concern for readability. Depending on the screen size of a user's device, text can take up different amounts of space. On a site with static sized text, a user with a huge desktop monitor may see a website with large blank spaces and text sprawling in long lines across the screen, while a mobile user might be scrolling down through seemingly endless text. On a small screen, text can appear large, however, on screens with higher resolution, text with fixed size could become too difficult to read, and on a smaller device it would take up way too much screen real estate. What are some workarounds for these styling challenges?
- Create maintainable responsive type with
em - Create maintainable responsive type with column count
One of the best ways to create maintainable type is with relative
measurements such as em. Em values are relative to the current font-size.
Because it is a relative measurement, it is very useful for keeping type
proportional. Let's take a look at an example where we want our header text
to always be two and a half times larger than our paragraph text. On certain
devices, when the screen gets below 400px we want all of our text to become
30% larger while still maintaining the relationship of the heading being
2.5 times larger than our paragraph.
body { font-size: 100%; }
h1 { font-size: 2.5em; }
p { font-size: 1em; }
@media only screen and (max-width: 400px) {
body { font-size: 130%; }
}In the code above, on line 1, 2, and 3 we are setting default styles. The body
element's default text size is already 100%, but we have included it here to
clarify the change that's made in the media query. On line 2 we set all h1
elements to be 2.5em, and on line 3 we set the p element to 1em. So, the h1 is
two and a half times larger than our paragraphs. In our media query on line 5 we
set the query to trigger for device screens less than 400 pixels. When this
occurs on line 6 we adjust the body font-size to 130%. This causes all elements
within the body (h1, p) to inherit this change and grow 30% larger.
Since we sized using em, the h1 and p adjust in proportion to each other even as
they grow or shrink in size. This makes it very convenient to make size
adjustments to one element, the body and thus affect all other type in our
layout uniformly.
Em values can be used in width and height properties, so this measurement can be used for the divs and elements making up your webpage structure, and would also adjust in proportion based on font-size, like in the example above.
Another tip for adjusting type is when you might want to wrap text into separate
columns. This is especially true on larger screen sizes where you have big bodies
of text content. You can imagine that as a paragraph stretches across bigger screens,
the lines of text get really long, and become awkward for the reader to find the next
line. Designers suggest that for optimum readability you want the measure of your
text lines to be between 40 to 80 characters. Anything smaller or larger becomes a
bit awkward to read. To tackle this we can make use of a lesser known, yet fairly
well supported CSS column-count property.
The default column-count is one, meaning text is contained within one column. When our screen gets bigger, it might be good to adjust the text into multiple columns; let's see an example:
<article>
<p>Nor again is there anyone who loves or pursues or desires to obtain pain of itself, because it is pain, but occasionally circumstances occur in which toil and pain can procure him some great pleasure. To take a trivial example, which of us ever undertakes laborious physical exercise, except to obtain some advantage from it? But who has any right to find fault with a man who chooses to enjoy a pleasure that has no annoying consequences, or one who avoids a pain that produces no resultant pleasure?</p>
</article>article p {
column-count: 1; /* This is the default so we don't really need to specify */
}
@media only screen and (min-width: 480px) {
article p {
column-count: 2;
}
}As we mentioned, paragraphs by default normally only occupy one column. However,
we can create the visual effect of this single paragraph element splitting into
multiple columns by setting our media query on line 5 to trigger on screens
greater than 480px; then on line 7 we set our paragraph to adjust its column
count to 2 columns instead. Have a look at this in the code example in the
resource section below at the bottom of this lesson.
Creating responsive layouts can be tricky, but with a number of techniques in mind,
this process becomes more manageable. It is to our advantage to set all typography
within our site to ems and then in media queries adjust the body font-size as a
percent to adjust all type in proportion to each other. This simplifies our media
queries on typography. In addition to em, with the column-count property, you
can adjust it to split text into virtual columns.
View Responsive Type on Learn.co and start learning to code for free.