"Responsive Web Design" was first described by Ethan Marcotte in 2010. Since that time there has been a responsive Web design revolution of sorts, but you may find evolution of responsive design to be more relevant. Responsive design has greatly impacted the Web design and development industry, and has created a fundamental shift in how websites are being built. As of 2014, the adoption rate of responsive web design is growing rapidly. Here is a responsive design cheat sheet that you may find a useful reference.
Here are complete frontend frameworks with full CSS and Javascript based components. These frontend frameworks include typography, sets of forms, buttons, icons and other reusable components such as navigation, alerts, popovers, buttons, images and HTML layouts.
Here are simple grid systems that are used to achieve responsive layouts. They offer CSS style sheets with column systems to facilitate the distribution of different elements accordingly on different devices sizes.
A collection of code examples, and places to find snippets for responsive design.
640 x 960 pixels
768 x 1024 pixels
1440 x 900 pixels
1920 x 1080 pixels
/* Extra small devices (phones, less than 768px) */ /* No media query since this is the default in Bootstrap */ /* Small devices (tablets, 768px and up) */ @media (min-width: 768px) { ... } /* Medium devices (desktops, 992px and up) */ @media (min-width: 992px) { ... } /* Large devices (large desktops, 1200px and up) */ @media (min-width: 1200px) { ... }
@media only screen { } /* Define mobile styles */ @media only screen and (max-width: 40em) { } /* max-width 640px, mobile-only styles */ @media only screen and (min-width: 40.063em) { } /* min-width 641px, medium screens */ @media only screen and (min-width: 40.063em) and (max-width: 64em) { } /* min-width 641px and max-width 1024px */ @media only screen and (min-width: 64.063em) { } /* min-width 1025px, large screens */ @media only screen and (min-width: 64.063em) and (max-width: 90em) { } /* min-width 1025px and max-width 1440px */ @media only screen and (min-width: 90.063em) { } /* min-width 1441px, xlarge screens */ @media only screen and (min-width: 90.063em) and (max-width: 120em) { } /* min-width 1441px and max-width 1920px */ @media only screen and (min-width: 120.063em) { } /* min-width 1921px, xxlarge screens */
/* Small */ @media (min-width: 35.5em) { ... } /* Medium */ @media (min-width: 48em) { ... } /* Large */ @media (min-width: 64em) { ... } /* X-Large */ @media (min-width: 80em) { ... }