Responsive design aids coming to Firefox

Mozilla has recently added two simple but very helpful aids to Firefox’s web developer toolset to ease the challenge of responsive design: designing and coding web interfaces for several displays, with several sizes, ratios, and features.

First, Responsive Mode gives you a variety of well known screen resolutions so you can simulate different screens in a landscape or portrait orientation. Just select Responsive Mode in the Firefox menu, and select the desired screen size and orientation.

Firefox resposive mode screenshot

Second, when you are inspecting an HTML element, common size related attributes like width, height, padding, border, and margin, are now displayed in the lower area of the Style panel. Open it, and click on the minimized widget below.

Firefox element size information screenshot

These tools should become generally available with Firefox 15, around early September. If you want to try it now, grab an Aurora 15 build today.

4 thoughts on “Responsive design aids coming to Firefox”

  1. The posting could have included the info that you can set devtools.responsiveUI.customHeight and devtools.responsiveUI.customWidth to setup a customized height and width setting in Responsive Mode.

    Otherwise, cool.

  2. Pingback: [图]响应设计辅助功能来到Firefox 15_互联网资讯最新报道_野火集

Comments are closed.