RESPONSIVE AND ADAPTIVE DESIGN - Practical CSS3: Develop and Design - page 317

A RESPONSIVE HEAVY

METAL BANNER AD !

As promised earlier in the topic, I'll round off this chapter by returning to the heavy
metal banner ad and making it responsive. I'll make it pair down to the smaller
“large rectangle” ad size of 336 x 280 in devices with screens narrower than 800px
and change it to a narrow banner that spans 100 percent of the screen width in
very narrow devices (less than 480px in width). I'll also use the media attribute in
my video <source> s to stop the video being served to narrow-screen devices and
include a background image instead in such cases. See the poster-responsive folder
in the root of the code download for the finished new version.

FIRST ALTERNATIVE: 800PX OR LESS

The middle-sized ad is achieved via the following media query:

@media all and (max-width: 800px) {
.
}

A fair amount of work was required here to adjust all the styles and get the ad
looking good at this narrower size. I won't discuss all the CSS changes in the media
query, because there is nothing new here. To see all the new styles, search for the
preceding media query in the code and check them out.
Note that I didn't tweak the animations: When I tested the narrow size in ani-
mation-supporting browsers, all the animations seemed to still look fine.

SECOND ALTERNATIVE: 480PX OR LESS

For all of the new styling in this section to work correctly, I used viewport to make
mobile browsers render at the real device width:

<meta name=”viewport” content=”width=device-width”>

Here is how I set up the alternative styling for narrow-screen browsers. Note that
I've completely hidden the <video> to save on processing in small-screen devices:

@media all and (max-width: 480px) {
video {
: ;
}