ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt
#display {
width: 80%; height: 50%; border: 12px solid #585858;
border-radius: 5px; margin-top: 20px; background-color: #eee;
}
/ base, in default monitor stand - keyboard configuration /
#buttonbase {
width: 90px; border: 12px solid #585858; border-radius: 5px;
position: absolute; top: 100px; left: 30px; transform-origin: 25px 5px;
}
#display, #buttonbase { display: inline-block; transition: .5s all linear; }
Finally, you’ll create the media queries to change the appearance of the #display and #buttonbase
elements (Listing 8-6). Note that these alterations cascade: smaller screen sizes will inherit the changes made
in media queries for larger screens.
Listing 8-6. CSS Code to Create Viewing Mode Symbols in a Responsive Design
@media screen and (max-width: 80em) {
#display { width: 50%; height: 60%; border: 10px solid #585858; }
#buttonbase { width: 8px; height: 8px; border: none;
border-radius: 50%; background: #fff; top: 101px; left: 70px; }
}
@media screen and (max-width: 40em) {
#display { border-width: 23px 5px; width: 45%; height: 73%; }
#buttonbase { top: 110px; }
}
As noted, most users—especially mobile users—will not see these animations because mobile devices have
fixed screen widths and nothing to adjust to. An alternative approach might be to show whether the screen is
being held in portrait or landscape mode, as shown in Listing 8-7.
Listing 8-7. Media Queries to Show Landscape and Portrait Mode on a Device
@media screen and (orientation: landscape) and (max-width: 80em) {
#display { transform: rotate(90deg); }
}
This creates the changing displays you see illustrated in Figure 8-6, with each device “morphing” into the
next as the viewport is resized based on the orientation of the device. The same principles can be applied to
animate many different aspects of web pages with responsive design.
Optimizing CSS Transitions and Animations for Mobile Devices
It is inevitable that the processors in mobile devices will grow faster and more powerful over time, but they will
always lag behind the abilities of full desktop models. It is also inevitable that developers will tend to code for the
platform in front of their noses, rather than what their audience may be using (as we saw during the browser wars
and in vendor prefix biases). Developers write code for the screen in front of them, the result of which may not
always scale down to the more restricted abilities of mobile devices.