Make a Responsive Web Page Without Using a CSS or JavaScript Framework

Instructor: [00:00] We have a static HTML page that is starting to look better on the desktop, but if we open the Chrome DevTools and click the button to toggle the device toolbar, then we can see when it's set to a mobile phone simulator, like the iPhone, it looks just awful.

[00:15] What's actually happening is the mobile browser is just shrinking the whole page down to fit. That's a problem because it's making the text really tiny. To fix that, let's open index.html. We're going to add a meta tag that will tell the mobile browser about the viewport. In the viewport meta tag, we can set the content attribute.

[00:34] Tell it that the width of the page should be whatever the device width is and the initial scale should be 1.0which means 100 percent. You can also set other options here, like a maximum and a minimum scale, but those limit how your end user can interact with your webpage, so it should be generally avoided unless you really know that you want to do that.

[00:56] Back in Chrome, we can refresh. Now the mobile view looks a lot better. We can go to the desktop view as well by hitting the toggle device button again. That still looks the same way as it did before, which is just what we wanted.

[01:09] Let's take it one step further. This "made by" link in the footer is an OK size in desktop mode, but, in mobile mode, it looks a bit too big for the smaller screen and it tends to take over. There's two ways that we could fix that. First, in style.css, we could go find the footer paragraph style and set the font size based on the view width instead of on pixels.

[01:32] We could set the font size to 2vw, which is short for view width, and vw represents a percentage of the view's width. The 2 here means two percent of a view's width. Back in Chrome, the font looks about the same on the desktop version. On the mobile version, it looks quite a bit smaller and not overpowering.

[01:52] Using vw is the first way to get responsive text sizes, but there's a couple of issues with that. First, even though the desktop size looks pretty good, the mobile size is a bit too small really. It'd be great if we could keep this size on the desktop but make it a bit bigger on mobile.

[02:07] Second, when we start shrinking the desktop site, the text size is based on the view width, so it gets smaller and smaller until it's completely unreadable. We'll fix both of those issues with media query in CSS. At the bottom of style.css, we'll set up media queries for two options.

[02:26] First, if the screen is under 600 pixels, which will represent our mobile devices, and then second, if the screen is 601 pixels or larger, which will be our desktop site. Inside of those media queries, we can put our styles for each screen size. On mobile devices, we'll set the footer font size to 14 pixels. In a desktop, we'll set it to a slightly smaller 12 pixels.

[02:52] Now we can refresh. The desktop footer size is small and out of the way. The mobile font size is slightly larger and better proportioned to the rest of the font. Keep in mind, too, that these media queries apply to so much more than just font size.

[03:07] A common thing to do, for example, is to set the display rules so the object can display as a block on mobile so it stacks and an inline block on the desktop so it's shown side-by-side. You could even hide large elements on mobile altogether by setting the display to none.

[03:22] Keep in mind that we just picked a screen width of 600 pixels as our split point, but you could have multiple media queries at any size you choose.