Ready to watch this entire course?
Become a member and get unlimited access to the entire skills library of over 4,900 courses, including more Web and personalized recommendations.Start Your Free Trial Now
- View Offline
- Creating new HTML5 documents
- Using code hinting for CSS3, HTML5, DOM elements, and jQuery
- Configuring jQuery widgets with the Widget Browser
- Managing media queries
- Previewing web pages on multiple devices with the Multiscreen Preview panel
- Configuring mobile application frameworks
- Building and emulating mobile applications
Skill Level Intermediate
Media queries are without a doubt one of the most important CSS developments in recent memory. The media attribute has long allowed us to target specific devices based on device types, such as print screen or projection; media queries allow us to expand this syntax to allow us to target devices based on things like screen resolution and orientation. This gives us a quick and easy way to change the presentation of content based on the device's screen size. Dreamweaver CS5.5 gives us a number of ways to create and manage media queries for our sites.
Let's start by creating a media query in Dreamweaver and then discussing the options available for managing them. So I have the index.htm file from the 03_03 folder open up, and I am going to start by showing you a couple of different places where you can manage your media queries. Now, one of the first places is, if you go up to the menu and you go to Modify, right there you will see media queries. It's also available in the Insert menu. So it's available in Insert and Modify; both of those would do the exact same thing. Now, if I go over to my CSS Styles panel menu, I will find Media Queries right there.
It's also available as a contextual menu within the CSS Styles panel, so if I right-click a rule or do something like that, I usually have that available to me as well right there. Now, probably the easiest place to access them is right up here in the Document toolbar using the Multiscreen Preview panel dropdown menu. So there is a little menu right beside that. If I grab that and go all the way down to the bottom, and there is Media Queries there as well. It really doesn't matter which method you use to get the dialog box; just choosing media queries is going to bring up the same exact dialog box. So whichever way you're most control with or wherever you're currently working at, that's probably the one that you'd want to use.
So this is a much more involved dialog box than anything we've ever had before in Dreamweaver in terms of dealing with media queries. The Multiscreen panel has allowed us to create media queries in Dreamweaver since the HTML5 pack was installed, but this is a much more robust way of working with them. The first thing that we're asked is whether we want a site-wide media query file or whether we want to work in this document. For this example we're going to do this document, but I want to take just a moment to explain what a site-wide media query might be. What this is going to do for you is it's going to allow you to choose an external style sheet.
In this case, it might be your main.css. You might have a style sheet set aside specifically for this. And then it's going to create an @import rule that's going to import your media styles for say tablets or mobile style sheets, those types of things. It uses an @media declaration to filter those styles so that they're only occurring based upon the screen resolution. So it's a nice way of sort of targeting your entire site. A lot of times it comes down to personal choice. Would you rather go ahead and have your media queries defined individually on each page, or would you rather do it externally in an external style sheet site-wide? Basically, it boils down to how you want to implement them.
So in this case, we're just going to test it with this document. Now, just below that we have a little check box that says, "Force devices to report actual width." What this is going to do is it's going to insert a meta tag into our document that is essentially is going to force any device that accesses your content to report its actual width instead of reporting a false width. Now, why would you need to do that? Well, there are a lot of devices out there that actually want to appear like a larger screen. They want to display the entire page. So rather than saying, "Yeah, sure, I am only 480 pixels wide," they are going to say, "Well, my actual resolution is 1280." So you want to prevent that from happening and this particular check box is a nice way of doing that. Okay.
So from here, we can go in and start creating media queries for our pages. One of the things that we can do is we can take a look at the Default Presets. And if you click that button, it's going to go ahead and give you three different presets: one for Phone, one for Tablet, and one for Desktop--and you can see what the actual syntax of the media query would be for each one of these. If you've never used media queries before, this might be a really good place for you to start. You can certainly learn the syntax this way, or get a feel for exactly how this is supposed to work. Now, I want to go ahead and create custom media queries, so I am going to use the Minus symbol to go ahead and get rid of all three of those.
So the first thing I am going to do is just create a brand-new media query by clicking on the little Plus symbol right there. It wants me to name this, so I am going to go ahead and name this 'Tablet' because it's going to be used for any tablets that we might be working with. And then I can specify a minimum width and I can specify a maximum width. You don't have to do both; you can just do one or the other. In this case I want my minimum width to be 481 pixels; I want my maximum width to be 768. As soon as I do that, I can see the syntax being recorded up here, so only screen and min-width 481 pixels, max-width 768.
Now I get to choose a CSS File. Now, if you don't already have an existing tablet style sheet, you could go ahead and create one at this stage as well. Notice that I have a dropdown menu that says use existing file or create a new one. In this case, we already do have an existing style sheet for this, but if you're at the start of a project, this is a nice way of going ahead and creating a media query and then generating a style sheet based off of that. So I am going to tell it to use an existing file. I am going to browse out. I will go in the 03_03 folder, _css, and I am going to find tablet.css. It's right there.
I will go ahead and click OK, and then I will click OK. Now, just to verify what this has done for us, I am going to go ahead and switch over to Code view and make sure I am looking at the Source Code. When I do that, if I scroll up towards the top, one of the first things that I'll see is I'll see the meta tag. You can see right here on line number 8, there is my meta tag. It's "viewport" content="width=device-width". So it's forcing device width from our devices. It wants that reported. Now, if I look a little further down on line 15, I can see the media query that's been created for me.
Once again, it's just a regular link tag, but in this case the media declaration, instead of being something like screen and projection, is passing my actual media query. Let's see if it actually worked. So I am going to go ahead and save this and preview this in my browser. As I do this, I notice that I am just getting my default styles at the browser's full size, but if I start to reduce the screen size, at a certain point I am getting my tablet style, so no menu here and a different layout for the homepage using the tablet media query. Cool! So I am going to close my browser and I want to go back into Dreamweaver.
Now, let's say you were working for a little while, then you realized that you also wanted to create a style sheet for your mobile devices. Well, one of the nice things about this dialog box is that you can go back and access it at any time, make changes to existing media queries, or even create new ones. So I am going to go right back to the pulldown menu, choose Media Queries, and it pulls it up and reports back. And I just want to come in and create a brand-new one. And in this case, I am going to create one for my mobile devices, and my minimum width is going to be 0; I will let it get as small as its wants to.
And for my maximum width, I'll go ahead and go with 480 pixels. That makes sense because my tablet's minimum screen size is 481 pixels. I do want to use an existing CSS file, so in this case I am going to Browse. This time I will go to the mobile style sheet, go ahead and click OK, and I will click OK again. Now, it's okay if you want to manipulate these by hand as well, so if I go into my Source Code, I can now see both of those style sheets. Well, what if I wanted to declare all media instead of just screen? So one of the things that I can do is change this media declaration.
I am going to change 'only screen' to 'all'. I will do the same thing here. I will choose 'only screen' and I will do 'all'. Also, what if I wanted to change this viewport meta tag? Right now, I am forcing it to report device width, which is fine, but what if I also wanted to set an initial scale so that it wouldn't be zoomed up and the page would be scaled to 100%? Well, that's easy enough to do. So I am just going to go ahead and click right after the "width=device=width" but still inside the quotation marks there, and use a comma to separate out this list. And here I want to do initial-scale=1.0, so make sure that that's scaled to 100%.
I am going to go ahead and save that. Now, we've made changes to the media queries directly within the code. Now, are those changes going to be reflected when we open up that dialog box again? Well, if I go back to the dialog box, I can see that in the case of my media queries themselves, the change of syntax is reflected. Now, you're not able to access and change the syntax right here. You will have to actually go in the code. But I do notice one thing: the force devices to report actual width check box is turned off. So by going ahead and making that change to the meta tag, Dreamweaver no longer recognizes that and it's just turned that off.
It doesn't mean that it's not going to work now; it will still work just fine. But that Dreamweaver doesn't actually recognize that particular value being passed. So if you manipulate them by hand, be prepared to have this dialog box sometimes not report things as accurately as if you're letting this dialog box manage it. So I am going to go ahead and save the page, and once again, I am going to preview that in the browser. And now in addition to our tablet styles, if we go a little bit shorter, we start to get our mobile styles. Cool! Now, there is one more thing that I want to show you before we move on, and that is that when you're setting up your site initially, you have a place where you can declare the site-wide style sheet for your media queries.
Let me show you where and how to do that. I am going to go right over to the Files panel. I am going to find the name of the site that we're currently working with, and I am going to double-click that. It's just the fastest and the easiest way to bring up the Site Setup dialog box. Now, this box would come up when you initially create a site, and it's going to come up every single time you edit a site as well. I want to go to the Advanced Settings, and when I go to the Advanced Settings, I see that I have a new dialog box right here that says Site-Wide Media Query file. Really, if you're going to be doing site-wide media queries where the external style sheets like tablet and mobile are brought in using an import and wrapped in a media block, then you should go ahead and establish this now.
If you do that, every time you bring up the Media Query dialog box, it will go ahead and fill that in for you. So I am just going to go ahead and cancel out of that and save the file. Having the ability to create and manage your media queries directly in Dreamweaver using that dialog box gives you a really nice way to take control over the process. Dreamweaver also provides us with a nice way to preview how successful our media queries are with the Multiscreen Preview feature, which we're going to explore in our next movie.