Web Programming with HTML5, CSS, and JavaScript

6.12 Responsive Images

As you know, users view web pages on different types of platforms—desktops, laptops, tablets,¹⁰ and smartphones. In this book, we focus on general-purpose programming concepts and syntax, and you should be able to use what you’ve learned to tailor your code for any of the platforms. However, if you want your code to be “responsive” (i.e., you want it to dynamically generate different layouts and images for different platforms), you’ll need to learn responsive web design.

Responsive web design (RWD) is the practice of writing code that dynamically generates web pages that conform to different screen sizes and viewing orientations (portrait or landscape). For example, FIGURE 6.15 shows how a responsive web page could be ...