Anything Responsive

How responsive design works

Responsive designs are created by combining one well-crafted HTML page with multiple sets of CSS styles, and then using media queries to target each set of styles. Media queries are CSS rules that inform a web browser about which set of styles should be applied to the page when the browser window is within a specified size. Essentially, media queries cause the styles applied to a page to change based on the width of the browser window. In most cases, when designers create a responsive design, they create three sets of styles and corresponding media queries, but it is possible to create as many different sets of styles and media queries as you would like:

• Mobile layout: Targets CSS rules that apply when the browser window is 480 pixels and below.
• Tablet layout: Targets CSS rules that apply when the browser window is 481 to 768 pixels. This layout inherits all styles from the mobile layout and adds styles that to apply to the page only when the browser window is in the tablet size range.
• Desktop layout: Targets CSS rules that apply when the browser window is 769 to 1232 pixels.  This layout inherits all styles from the mobile and tablet layouts and adds styles that apply to the page only when the browser window is in the desktop size range.

Read More...

Source by: Posted by Janine Warner