Responsive design is the practice of designing a website so it looks and works properly on a range of different devices — particularly mobile phones and tablets as well as desktops and laptops.
The most obvious factor here is screen size, but there are other factors as well, including the pixel density of the display and whether it supports touch. Responsive Design Mode gives you a simple way to simulate these factors, to test how your website will look and behave on different devices.
Toggling Responsive Design Mode
There are three ways to toggle Responsive Design Mode:
- From the Firefox menu: Select “Responsive Design Mode” from the Web Developer submenu in the Firefox Menu (or Tools menu if you display the menu bar or are on macOS).
- From the Developer Tools toolbox: Press the “Responsive Design Mode” button in the Toolbox’s toolbar:
- From the keyboard: Press Ctrl + Shift +