Responsive Design and Breakpoints

Still trying to wrap my head around responsive design – I figured that Bootstrap would do it automatically in a sort of plug-and-play method (well, not to say that it won’t, but I haven’t played around with it enough to really say so for sure).

Some new concepts for me are:

Using a Fluid Grid
- Make layout elements sized in relative units (percent) not in pixels

Flexible Images
- Again, size images in relative units and not in pixels

Media Queries
- Use media queries to specify different CSS style rules for different browser width

More on Break Points:

On the topic of Media Queries, there this cool screen breakpoints diagram from this tutorial: Build Responsive Real World Websites with HTML5 and CSS3.

Screen Shot 2015-10-23 at 9.27.18 PM

Essentially you can start with using these standard break points, and then go back and refine the breakpoints according to where design starts to look funny. There’s a nice feature built into Google Chrome Dev Tools where the screen dimensions will show as you resize the web-browser. This is how you’ll know what to set the new dimension break points to according to your design.

Screen_Shot_2015-10-24_at_11_42_36_AM

Handy? I think so!

Duncan Leung

Front End Developer at iHerb.com

Irvine, CA

Subscribe to Duncan Leung: Javascript and Front End Development

Get the latest posts delivered right to your inbox.

or subscribe via RSS with Feedly!