Responsive Web Design

Responsive Web Design Using EM-Based Media Queries


This course has been updated! We now recommend you take the CSS Grids and Flexbox for Responsive Web Design course.

Check out a free preview of the full Responsive Web Design course:
The "Using EM-Based Media Queries" Lesson is part of the full, Responsive Web Design course featured in this preview video. Here's what you'd learn in this lesson:

An em-based approach to media queries allows for a more proportional measurement and layout that adjust based on font-size.

Get Unlimited Access Now

Transcript from the "Using EM-Based Media Queries" Lesson

>> [MUSIC]

>> Ben: So you've seen a handful of examples of these queries now, and we've talked about, we've seen some pixel-based media queries, and we've seen em-based media queries. And at this point we have pretty much shifted all of our media queries we're writing using the unit of measure now.

[00:00:24] Ems are relative, they're based on the initial font size declaration. So if you define somewhere above, like in the body or something, a font size of 100%, then you're kind of evening out the playing field. Later on then, you can say a font size of 1 inside of a say a div, and then inside of that a paragraph if you did 2 ems, it would double in size because that's of the relative to its parent.

[00:00:51] Inside of that paragraph, if you say you had a strong tag, and you set the font size to .5, that would actually be cutting it in half back to one. So you gonna kind of do some math to calculate those things. It gets a little bit confusing. We just recently put out a nice mix in for pre-compilers.

[00:01:09] It's built to work with SaaS, but it could be ported to any of the other pre-compilers that uses rems, which is a newer unit of measure, but it doesn't sort of it doesn't. Basically what it does is it uses the same base for all the measurements so instead of getting sort of additive as you get deeper deeper nested in your CSS, it would just go back to that core, that root font size.

[00:01:36] That's a much more usable cause you're not always doing math to figure out how what the font size is actually gonna translate to. That's out on GitHub, and there's a code pen, I think, for it as well. But we use ems because they're a more proportional unit of measure, and we're trying to get away from thinking in pixels.

[00:01:54] And because your layout now will adjust based on font size, so if you have a user who happens to have poor vision, or has increased the font size for some reason, you can still serve them an appropriate layout based on that font size and line lengths and those sorts of things.

[00:02:08] And it just, it generally adheres a bit more to the principles of responsive, we could have a beer later tonight if you want to talk more about this. I'll give you a quick demo of a site that's built using ems and show you the difference that you get.

>> Ben: So Jason Grigsby is out in Portland. I mentioned him a little earlier. This is his company Cloud Four, and one of his, actually lies are right here. She just wrote not maybe a few months back. They redesigned this site, and she did a lot of the front end development on it, and wrote a big article on their blog, about why they've chosen to start using ems as well.

[00:02:56] Really good read. If you want to get into the real nitty gritty of what the difference is and how you can calculate some of those things. But I'll show you their site, so you know you've got fairly standard layout here. And as you adjust, kinda get this nav that like sticks to the top of that carousel, or that hero section.

[00:03:13] And then the further down you go, youshift into this sort of having a menu kind of layout here. Right, so fairly simple design. Nothing overly exciting here, right, it's really very, very standard. But watch what happens as I decrease my font size. So if I decrease and refresh you'll see that.

[00:03:40] Whoops.
>> Ben: As I take my width down
>> Ben: you'll see that I have to get much more narrow with my browser width before I trigger this next layout. Okay, if I take my font size back up, I have to refresh because it's not sort of responding right away, but I can actually trigger a different layout based on the font size.

[00:04:08] So this is kind of fascinating. I can refresh, bump my font size way up, and even without it a massive resolution, a massive view port width, I'm triggering the smallest layout that they have. And what's cool is that the line length is sort of maintained because we've done, we've taken this approach.

[00:04:28] So this takes a little bit of experimentation to play around with, but this is where I think most people are gonna be going eventually, okay? And if you take a look at the Media Query bookmarklet, you'll see here that she's got a ton of all these based queries.

[00:04:45] You know, hey, look at this. They're not using a screen end. Way to go. Way to go, Jason. Cool. Okay, so questions on that? I know that can be a bit confusing. But if you can get kind of just get into a browser and start experimenting with some of those things, and the Media Query bookmarklet that Rob wrote will will give you a good understanding of where you are at any given point as you adjust, okay?

[00:05:13] All right, cool.
>> Ben: Okay.
>> Ben: Let's see, trying to think. I've got the next section here is on retrofitting, but I'm wondering, it's probably going to take more than, we have about a half an hour. Give me a second here to take a look at my notes, and see if there's another section that we can squeeze in.