Responsive Design View

  • Revision slug: Tools/Responsive_Design_View
  • Revision title: Responsive Design View
  • Revision id: 338087
  • Created:
  • Creator: Yoshino
  • Is current revision? No
  • Comment Changed the link to internal

Revision Content

{{ fx_minversion_header("15.0") }}

The Responsive Design View makes it easy to see how your designs will look on different sized screens. Responsive designs will adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones. The screenshot below is an example of the mozilla.org website viewed with a 320 by 480 content area.

The Responsive Design View is convenient because you can quickly change the size of the content area without changing the size of your browser window. Changing the browser window's size can get annoying because all of your tab sizes change then and you also have less space in the window for developer tools.

You can find the Responsive Design View in the Web Developer menu. Alternatively, you can use the ctrl-alt-M shortcut on Windows or Linux or cmd-opt-M on Mac to start up the Responsive Design View. Pressing the <esc> key will close the view. While you're in the Responsive Design View, you can continue browsing as normal in the resized content area.

At the top of the Responsive Design View, there is a pull-down menu of preset sizes that are convenient for quickly seeing what your design looks at a number of common screen sizes. There's also a rotate button to instantly switch the width and height (similar to rotating a mobile phone or tablet).

You can use the resize handle at the lower right of the content area to change the size of the content area.

Revision Source

<p>{{ fx_minversion_header("15.0") }}</p>
<p>The Responsive Design View makes it easy to see how your designs will look on different sized screens. <a href="/en-US/docs/Web_Development/Responsive_Web_design">Responsive designs</a> will adapt to different screen sizes to provide a presentation that is suitable for different kinds of devices, such as mobile phones. The screenshot below is an example of the <a href="http://mozilla.org" title="/en-US/docs/Localizing_extension_metadata_on_addons.mozilla.org">mozilla.org</a> website viewed with a 320 by 480 content area.</p>
<p><img alt="" src="/files/3877/Responsive%20Design%20View.png" style="width: 372px; height: 628px; float: left; padding-right: 2em" />The Responsive Design View is convenient because you can quickly change the size of the content area without changing the size of your browser window. Changing the browser window's size can get annoying because all of your tab sizes change then and you also have less space in the window for developer tools.</p>
<p>You can find the Responsive Design View in the Web Developer menu. Alternatively, you can use the ctrl-alt-M shortcut on Windows or Linux or cmd-opt-M on Mac to start up the Responsive Design View. Pressing the &lt;esc&gt; key will close the view. While you're in the Responsive Design View, you can continue browsing as normal in the resized content area.</p>
<p>At the top of the Responsive Design View, there is a pull-down menu of preset sizes that are convenient for quickly seeing what your design looks at a number of common screen sizes. There's also a rotate button to instantly switch the width and height (similar to rotating a mobile phone or tablet).</p>
<p>You can use the resize handle at the lower right of the content area to change the size of the content area.</p>
Revert to this revision