- Is it Time to Buy a New Computer?
- Posted on June 11, 2012 | Comments Let's find some "excuses" to buy a new computer. Why do we need to spend?
Posted on May 23, 2012 by Michael Rosario | Comments
Responsive web design is a new approach in which a site would appear flexible aka "responsive" as it automatically adjusts to your screen size, browser platform, and/or screen resolution. Before responsive design/development, we had something close — the ability to serve targeted CSS stylesheets for mobile, screen, and print - three separate stylesheets!
Remember these?
<link rel="stylesheet" type="text/css" href="reset.css" media="all" />
<link rel="stylesheet" type="text/css" href="mobile.css" media="handheld" />
<link rel="stylesheet" type="text/css" href="screen.css" media="screen" />
<link rel="stylesheet" type="text/css" href="print.css" media="print" />
Responsive websites show the same content - but rearranged to maximize the use of the space allowed by your browser or screen using media queries. See example below, let's say – iphone screen, ipad screen, and LCD screen:
/* CSS for all browser goes here */
@media only screen and (max-width: 900px) {
/* CSS for browser screen with 900px and below goes here */
}
@media only screen and (max-width: 600px) {
/* CSS for browser screen with 600px and below goes here */
}
For more information here are a few helpful resources:
Books to Read:
Cool Frameworks/Boilerplates: