Pro CSS3 Animation

ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt

Indicating Viewport Size with CSS3 Media Queries

and Transitions

Using media queries, you can trigger an element to “morph” in appearance as the browser is narrowed—for
example, to show different viewing modes in a responsive page, so that users understand that they are not
looking at a simple interpretation of a desktop site on a mobile platform, but at a page that is customizing itself to
the size of the browser window (see Figure 8-6).

Figure 8-6. A responsive transitioned symbol in three different states, representing three different viewport sizes

First of all, you will set up a series of breakpoints:

•    120em wide and above will be considered “widescreen”.

•    At 80em wide you can assume the user is viewing the site with a tablet.

•    At 40em and below you should assume the user is using a smartphone.

Next you create the elements that will be used to show these various states from pure CSS. There will be a
total of three elements: a containing div with an absolute position that will keep all of the elements in the top-
right corner of the screen; a span representing the display, and another span representing the base or button, as
shown in Listing 8-7.

Listing 8-7. HTML Code for a Transitioned Display Mode in a Responsive Page

Next, you’ll create the base CSS for the elements in Listing 8-8. This will include the transition settings.

Listing 8-8. CSS Code to Create Viewing Mode Symbols in a Responsive Design

• { box-sizing: border-box; }
  body { font-family: Avenir, sans-serif; margin: 100px 0; }
  #viewingmode {
  width: 150px; height: 150px; background: rgba(0,0,0,0.2);
  position: absolute; top: 0; right: 0; text-align: center;
  }

/ screen, in default widescreen presentation /