Example 5 - Responsive Design Mode

Responsive design is the practice of designing a website so it looks and works properly on a range of different devices: in particular, 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.

There are three ways to toggle Responsive Design Mode:

Try to see this page using the Responsive Design mode!

You can learn more about the Responsive Design Mode in this MDN article.