Resizive aims to improve finding media query breakpoints for responsively designed fluid websites by making the process sane and easy.
Enter a website URL in the text field, press Resize!, and watch the magic happen. Resizive will animate the width of your website, constantly changing width and forcing the iframe containing the website indicated by the URL entered to repaint itself. Resizive animates in 35px* steps starting from the browser's current width down to 320px wide, and then reverses and animates back to the width of the browser. 320px is an arbitrary low point based the smallest of the common mobile device sizes. By making the browser's window fullscreen, the best effect will be gained by allowing Resizive to animate to that fullscreen width, displaying the largest range of sizes possible.
The width of the iframe at any given time is displayed in px during active use. If you notice a breakpoint in the animation where you think you need to apply a media query change, click the pause button. Plus(+) and minus(-) buttons are available to update the width in 10px* increments to allow fine tuning to find the perfect break point.
Resizive allows localhost to be used as a URL as well! Simply enter a URL similar to http://localhost:3000/ and Resizive will treat it no different than a live URL. Also, if a known specific pixel width needs to checked for a breaking point, pause the resizing animation and edit the displayed width directly. This is very helpful for unusual pixel sizes, or if trying to halt the animation as a precise point is difficult.
Keyboard controls recognized:
←: Decrement 10px* horizontally→: Increment 10px* horizontally↑: Decrement 10px* vertically↓: Increment 10px* verticallyThere's also preset choices for common CSS pixel device sizes for both phones and tablets to choose from.
*: to change animation speeds, +/- step increment values, and other settings please see the config page or use the gear icon at the topLeft.