ChApter 8 ■ IntegrAtIng CSS3 AnImAtIon wIth reSponSIve weB DeSIgn AnD JAvASCrIpt
The one remaining problem is the potential for very large or very small images to be created at extreme viewport
sizes. You might wish to protect the design by setting minimum and maximum sizes to the image (see Listing 8-3).
Listing 8-3. A Responsive Image with a Minimum and Maximum Size
.left { width: 47.22%; height: auto; float: left;
margin-right: 2.5%; margin-bottom: 2%;
max-width: 425px; min-width: 150px;
}
You can achieve the same effect on
■Tip It’s also possible to resize text dynamically without using keyframes, transitions, or media queries. the vw
unit measures the viewport width: 1vw is 1/100th of the width of the browser window. So if the viewport is 400 pixels
wide, 1vw would be equivalent to 4px. You can use this unit to scale your text as the browser resizes:
h1 { font-size: 4vw; }
with this CSS, h1 elements on the web page will resize as the browser expands and contracts. You can also use vh
and vw on other elements as well.
Responsive Background Images
You can easily resize background images dynamically in response to viewport changes by using the
background-size property (here using an image by Vinoth Chandar at http://www.flickr.com/photos/
vinothchandar/6168933212/) as in Listing 8-4.
Figure 8-2. An alternate responsive image