blog post

Understanding the key differences between responsive and adaptive design will keep everyone on the same page and help you select the best approach for your project.

Responsive vs. Adaptive

True responsive design is fluid, using CSS3 media queries to respond to any screen sizes. With the use of this CSS3 module, you can create a flexible grid where text can wrap and images can shrink to adjust along with your browser. For designers, this is similar to adjusting a text box in Photoshop and having the copy adjust to fill the height and width of the box.
Adjust the browser size of this responsive website to see how the page contents responds.
With responsive design, the use of media queries also opens up a range of options that allow for layouts (along with colors, images, fonts and text styles) to change based on screen size.
Adaptive design uses a series of static layouts based on breakpoints. For example, you may design a webpage at three different sizes: 320 for mobile phones, 760 pixels for tablets, and 960 for desktop browsers. Unlike responsive (where the design responds while you adjust a browser window), adaptive files don’t respond once they are loaded. It detects the device and calls up the properly sized layout to view. For a straight-forward visual example of how these both work, check out this site by Nick Davison.

  • Share This Story

Pleas give your valuable comments to improve the contents.

about author

Atul kumar shukla

I'm Atul Kumar Shukla, working as a web developer.
Welcome to my Blog. This is my personal blog where i post my own questions and answers , articles about ASP.Net., SQL Server, HTML, CSS, Jquery and many more..

Visit Profile

Leave a comment


Get More Stuff
Subscribing to the TheOneblogs newsletter and get intersting stuff and updates to your email inbox.
Your Email


Style Switcher

Change Color

×! We use cookies to improve your user experience. More information