Start learning with our library of video tutorials taught by experts. Get started
Viewers: in countries Watching now:
In CSS3 First Look, staff author James Williamson provides an in-depth introduction to the newest CSS standard, detailing its modular format, history, and current level of browser support, while also demonstrating its capabilities and applications. The course includes tutorials on using new selectors, modifying typography and color, working with the box model, and understanding media queries. Exercise files accompany the course.
Now that we have our tablet and mobile specific style sheets, we need to use media queries to target those devices. We'll start in this movie by discussing targeting based on screen size and follow that up by dealing with some considerations for targeting iOS devices such as the iPad and the iPhone. So I have the tours.htm opened up and right at the top of the page here in the code we have our links to our style sheets. Now currently the tablet and the mobile style sheet are applying to all screen and projection devices.
We want to change that. So the first thing I am going to do is work with my tablet style sheet and I am just going to go ahead and replace the contents here, projection and comma, so I am just going to leave screen. Actually, if I wanted to, I could also do "all," but remember that would have applied like print devices as well. So I am just going to leave it as screen. So I'm going to screen and, and then open up our parenthesis. Essentially, here I'm going to do minimum width of 481 pixels. Now that's not a random value that I chose.
Most mobile devices, including the iPhone, they have a minimum screen size of 480 pixels. More on that a little bit later on when we talk about iOS specific devices. So, for a tablet, I don't want those styles to be served below that. I want the mobile style served below that. So that's what we are doing with the minimum width. Then I am going to use another and keyword to join another media function. In here, we're going to a max width, max-width. Now the max-width here is going to 768 pixels.
Coincidentally enough, that's the width of the iPad in the portrait orientation. Okay, now we are ready to go into our mobile media queries. I'm just going to save myself a little bit of typing by copying this media query and then pasting it in place of screen and projection and again here my values need to change. I'm going to do a minimum width of 0. Really, it'll allow me to on any device from 0 on up to 480 pixels. So notice how these meet. 481 to 768, I get my tablet styles. Anywhere between zero to 480, I get my mobile styles.
So I am going to go ahead and save that. Now I want to have a discussion here about minimum width for just a moment. Minimum width is more reliable than device width. I know I've read articles where people are using device-width to target mobile devices and tablets and things like that. Now the device itself may have a specific screen size, but here's the thing that you have to understand. Mobile displays are sometimes served at a very different resolution and screen size, based on what the manufacturer's idea of what an ideal viewing size is.
So while your media query may work in targeting that device, the problem is that it is going to be served at whatever resolution or pixel aspect ratio that the manufacturer has determined. So a lot of your mobile site will appear, but it'll be very tiny or not the size you needed. So essentially, by using minimum and maximum width you're targeting the viewport itself. So the actual viewport size, not the device size, and it's a lot smarter choice than using device-width to do that.
It helps to avoid a lot of problems. Okay, so now we have our tablet and mobile screen sizes being served based on the width of the available viewport and as we've seen, resizing the screen size will serve the desired layout. Let's go ahead and just test that. So if I preview this in Chrome, again that shrinks down. Shrink it a little further, we get our mobile. Cool! It's working. Now, there are still a couple of tweaks that we need to make to target specific devices, such as the iPhone and the iPad.
Now before we get into those however, I want to take a brief detour into working with page orientation and we are going to do that in our next movie.
Find answers to the most frequently asked questions about CSS3 First Look.
Here are the FAQs that matched your search "":
Sorry, there are no matches for your search ""—to search again, type in another word or phrase and click search.
Access exercise files from a button right under the course name.
Search within course videos and transcripts, and jump right to the results.
Remove icons showing you already watched videos if you want to start over.
Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.
Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.