A great way to demonstrate responsive breakpoints inside of a styleguide with iframes and angularJs.
Sometimes there's a need to demonstrate inside of a styleguide what components (menus, tabs, navs, etc...) look like at different breakpoints. This is a technique that uses iframes embedded within an example styleguide. The demo uses AngularJS, Angular Material via CDN and is optimized for apple iphone and ipad device breakpoints and their screen dimensions. Example buttons can be easily adjusted to display different breakpoints for other Android, Desktop and mobile devices.
- iPhone4 320px X 480px
- iPhone5 320px X 568px
- iPhone6 375px X 667px
- iPhone7 375px X 667px
- iPhone6 Plus 414px X 736px
- iPhone7 Plus 414px X 736px
- iPad 768px X 1024px
See demo here: http://craigtockman.com/responsive-styleguide-demo