Responsive design makes use of flexible layouts, flexible images, and cascading style sheet media queries to detect the user device screen size (viewport) and orientation. With these we are able to dynamically change the layout to accommodate handheld or mobile devices.
This system utilizes styling techniques to modify existing page elements at run-time. For example, a company logo graphic may appear at 100% scale on a desktop monitor, that same graphic might be reduced to 40% scale when viewed on a tablet, or similarly reduced to 20% scale when viewed on a smartphone.
The number of screen sizes associated with mobile devices are so numerous that it is not possible to target all sizes specifically. Instead, we specify a range of the most common screen sizes. Below is an example of how this site reacts to smaller screens.
240px 320px 480px
June 11, 2014