How Responsive Web Design Works
CSS3 is the latest version of the web standard used to add a design layer to web pages. Responsive web design primarily uses a new feature of CSS3 called media queries, which literally asks the browser about the environment it is in and then delivers styles based on those responses. For example, a media query might ask if the screen size is within a certain width range and then deliver styles that will best ﬁt that screen width, possibly making text larger or smaller to accommodate.
Media queries are used to set styles based on the display environment. Added as part of CSS3, media queries effectively “ask” the application (browser or other web-enabled application) about its capabilities and can then deliver styles based on the response. For example, the server may query the web browser about its display width and then deliver styles that are optimal for that width. Keep in mind that no response is still a response. If the web browser does not support media queries, default styles are delivered that will look acceptable on any web browser that supports basic CSS.
View client-side and server-side techniques for use of media queries
Interface breakpoints are techniques where media queries are used to define where the interface radically alters to optimize for the platform's environment, changing the content and navigation layout to fit. The breakpoints chosen will depend on the needs of the particular design, but they generally fall into the categories of small, medium, and large, corresponding to smartphones, tablets, and desktop/laptop computers. Additional thought may also be given on the small and medium breakpoints to landscape or portrait orientation. Finally, an outlier breakpoint for larger screens (larger computer monitors and television sets) might also be considered, but as yet there is little evidence to support that this is a growing target audience. The main user experience concern would be in making the interface larger proportionally to account for users who may be sitting further from the screen. As yet, web surfing from the couch has not gained much popularity, and most users with larger computer monitors are still sitting close to their machines and do not need to have the interface be larger than if they were using a smaller monitor.