Web application approaches - responsive, adaptive, and flexible

If you want to support a large diversity of devices which your users may have, your website or web application should be adapted for different types of screens and resolutions. In this book we will talk about some of the most used design techniques to adapt web pages to different screen sizes. Each of them tries to approach the problem in different ways and understanding them will help you to choose the right one for each type of project.

Responsive behavior

A page with responsive behavior uses media queries to manage the position and size of the elements that form the web page.

A media query is a CSS instruction that sets a different style based on the properties of the user device, such as the screen size. In the following example, we use media queries to change the size of the content according to the screen size, making the content go full width on 640 px-wide screens or smaller, and making content narrower for screens wider...