├── Procfile ├── favicon.ico ├── index.js ├── package.json └── index.html /Procfile: -------------------------------------------------------------------------------- 1 | web: node index.js 2 | -------------------------------------------------------------------------------- /favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/remy/responsivepx/HEAD/favicon.ico -------------------------------------------------------------------------------- /index.js: -------------------------------------------------------------------------------- 1 | var connect = require('connect'); 2 | 3 | var app = connect().use(connect.static('./')); 4 | 5 | require('http').createServer(app).listen(process.env.PORT || 3000); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "responsivepx", 3 | "version": "1.0.0", 4 | "description": "find exact breakpoint widths in pixels", 5 | "main": "index.js", 6 | "scripts": { 7 | "test": "echo \"Error: no test specified\" && exit 1" 8 | }, 9 | "repository": { 10 | "type": "git", 11 | "url": "git://github.com/remy/responsivepx.git" 12 | }, 13 | "author": "Remy Sharp", 14 | "license": "MIT", 15 | "bugs": { 16 | "url": "https://github.com/remy/responsivepx/issues" 17 | }, 18 | "homepage": "https://github.com/remy/responsivepx", 19 | "dependencies": { 20 | "connect": "~2.12.0" 21 | } 22 | } 23 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | responsivepx - find that tricky breakpoint 6 | 7 | 8 | 61 | 62 | 63 |
64 | 65 | 66 | Scrollbar visible? 67 | Width: 79 | 80 | 81 | 82 | Height: 83 | 95 | 96 | 97 | Share 98 | 99 |
100 |
101 |

About responsivepx

102 |

Enter the url to your site - local or online: both work - and use the controls to adjust the width and height of your viewport to find exact breakpoint widths in pixels. Then use that information in your media queries to create a responsive design.

103 |

Watch the video explaining usage and why it was built.

104 |

If your site appears with scrollbars, make sure to check the scrollbar visible box to get the right viewport width and height.

105 |

Fork the project or log an issue on github

106 |

Built by @rem

107 |
108 | 109 | 200 | 201 | 350 | 351 | 352 | --------------------------------------------------------------------------------