I’ll open up Chrome Dev tools emulator, and look at a mobile view of the web fundamentals site. I’ll open Chrome, navigate to Web Fundamentals, then open the Chrome Developer Tools, using Cmd+Option+J, or Control+Alt+J. Next, I’ll hit the emulator button. It’s that phone looking icon in the toolbar. Great, the emulator is ready to
To start the new width goes here. The new height goes right here. And I type the device pixel ratio in right here. For the user agent string I simply pasted into the box right here. And then I got this message that I needed to reload. And ta da, I’ve got my view port
Let’s start with Medium. As the page gets larger, we can see that the text reflows. That’s good, but that’s not a breakpoint. But, once the viewport is wide enough, we see that the images got larger and, so did the text. That’s a breakpoint. Once the viewport is this wide, we can see that
To start with, the viewport on the phone is about 320 pixels, which is 640 divided by 2. For the phablet, or the phone tablet, anything around about 300 is going to be accepted. Sometimes device manufacturers fudge the numbers just a little bit, which is going to give you fractions. So, anything around 300’s
Congratulations on building the mobile version of the site. You’ve started to apply the basic concepts of responsive design.>>In the next lesson, you’ll learn the key techniques that you’ll need including media queries and break points, in order to build a site that responds to different screen sizes.>>Yeah, sounds great. We’ll see you then.
Do you remember my personal site from the beginning of the first lesson? Well, it looks like there are some issues with it. When I opened it up to test on mobile, in this case, a Nexus 5. It looks awful. See how I have to scroll back and forth to see the whole page?
Earlier, I mentioned it’s important to make sure that the content fits within the viewport to prevent horizontal scrolling. You should use relative units when specifying widths for elements to prevent them from accidentally overflowing the viewport. Keep in mind, CSS does allow content to overflow it’s container. So if you don’t specify a size
Let’s try a little experiment. I want you to read the first paragraph of Alice’s Adventure in Wonderland out loud. It’s a little weird right? With only a few words per line, it’s kind of awkward to read. Words or phrases that might be read as groups, end up getting broken across multiple lines. Making
For this quiz, I’ve got some CSS on the screen with two break points and the two resulting layouts. I want you to tell me which div is which. For the red, green, and dark blue boxes, type in the IDs of the elements over here that match. Your options are box A, box B,
All right. So this is going to be the 30 second version. If you want more detail, check out the next video where I’ll be spending seven or eight minutes really diving into how I use dev tools to make changes. The meta tag looks like this, copy and paste this line into the head