In the previous section, we took a look at a simple example of creating media queries to show or hide elements when a list of editors is resized. We used Firefox's Responsive Design View option to resize the screen for us; this is one option we can use to cleanly resize a screen for mobile viewing; it's a critical tool to work with media queries.
You can use special tools for this purpose, but most modern browsers already have a perfectly adequate tool built in for this purpose. Let's take a look at a few in turn.
For Firefox users, press Ctrl + Shift + M to activate Responsive Design View, as shown in the following screenshot:
However, if your preference is Google Chrome, then the same functionality is available—it is part of the developer tools set, which can be activated by pressing Ctrl + Shift + I:
If you are an Opera user, then there is the dedicated Opera Mobile Emulator, which is available at http://www.opera.com/developer/mobile-emulator, with versions...