ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt
Figure 8-5. A responsive heading element
If instead we wanted to keep the heading on a single line, we could reduce the size of the text at the
breakpoints and transition between them as shown in Listing 8-6.
Listing 8-6. HTML for a Responsive Background Image and Transitioned Text
h1 { font-family: 'Calluna Sans', Arial, sans-serif;
text-align: center; font-size: 10rem; margin: 8rem auto; transition: 1s font-size linear;
}
@media screen and (max-width: 1100px) {
h1 { font-size: 8rem; }
}
@media screen and (max-width: 900px) {
h1 { font-size: 7rem; }
}
@media screen and (max-width: 800px) {
h1 { font-size: 6rem; }
}
The code shown in Listing 8-6 gives you the result shown in Figure 8-5.Figure 8-4. A nonresponsive heading element breaking on spaces under a narrow viewport