Learning Less.js

Using tools to resize the screen

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 ...