Web Browser
Learn
Media Queries

Responsive Web Design

When someone visits a website, it's possible they are viewing it on a phone, tablet, computer, or even a TV monitor. Because screen sizes can vary greatly across different devices, it's important for websites to resize and reorganize their content to best fit screens of all sizes.

When a website doesn't respond to different screen sizes, the website may look odd or become indecipherable on certain devices. This usually occurs on smaller screens, like phones. When a website responds to the size of the screen it's viewed on, it’s called a responsive website.

Because websites can be displayed on thousands of different screen sizes, they must be able to respond to a change in screen size and adapt the content so that users can access it.

Instructions

Let's take a look at a website that does not respond to different screen sizes.

  1. First, visit this site.
  2. Then resize the width of your browser to simulate a smaller screen size. Note how the content on the web page does not shrink as you resize the browser's width.

In contrast, let's take a look at a responsive website.

  1. First, visit this site.
  2. Again, resize the width of your browser and note how the content on the web page resizes and reorganizes itself.
Report a Bug
If you see a bug or any other issue with this page, please report it here.