Start learning with our library of video tutorials taught by experts. Get started
Viewed by members. in countries. members currently watching.
Discover how to make your website more readable and efficient across various screen sizes and devices. Join author Chris Converse as he shares his own specialized techniques for creating a responsive site. The course takes the site from start-to-finish, from comping your ideas in Photoshop, to setting up the HTML page and containers, to styling established elements for small, medium, and large screens. In particular, Chris shows how to load images with CSS, reposition the nav bar for better viewing on mobile devices, and how to make the download time faster for small screens by providing multiple versions of your banner graphic and other images. Plus, learn how to replace graphics with high-resolution versions for Retina displays using CSS media queries.
This course was created and produced by Chris Converse. lynda.com is honored to host this training in our library.
Now we're going to add some media queries to our CSS that's going to detect the pixel ratio of the individual devices. So in the Exercise Files for Chapter 12, let's open up folder 8, called Snippets. And let's open up Device-Pixel_Ratio in our text editor. Now this snippet contains a media query that has support for a whole series of different web browsers. And basically what they're doing here is they're picking out whether the device ratio is set to 2 or higher. This is the high definition or 240 pixels per inch. Now again a lot of devices support higher resolutions than this, but if we set this to 2, we can at least pick out high definition displays and anything greater.
So down here, we have our rules go here, comment. So let's come in here and copy all of this code. Let's switch back to our screen_styles.css file. Let's scroll down to the bottom. I'll hit a few Returns, and then we'll hit paste. So again, this comment here, rules go here is where we can put our rules. So the first thing we're going to do is swap out all the promo graphics. So let's scroll up here, and let's find promo.one, two, and three. Let's come in here and copy all three of these rules. Let's scroll down, where we have, rules go here. Let's paste all of these. I'll just format this a little bit. So what we're going to do here is, change out the graphics if we're on a high-density display.
So for background-image, let's come in here and, after promo_1, let's put _2x. I'm going to copy the _2x. Inside of promo_2, we're going to add an _2x, there. And then, _2x after 3. Now, if you were to look at this web page on the device that has a high definition display, what you would see, is this graphic would now be double the size. We're now taking a graphic that was 60 by 60 pixels, and it's now taking up 120 by 120 pixels. What we need to do is scale the graphic down.
Now, we're using this as a background graphic. So, what we're going to do inside of our CSS, is let's scroll up until we have just the promo class, where we've defined some of the properties for the background. We're going to come in here and add a CSS property called background-size. What background size will do is control the size of the graphic that's being loaded into the background. Without this setting, the graphic will come in at its 100% size. So the first property we're going to set is going to be the width. We're going to set that to 60 pixels, then a space and then we're going to set 60 pixels on the y as well. Then a semicolon. So now what's going to happen is that 120 pixel graphic is going to be scaled down to 60 by 60.
And then on high density displays we're going to have all those extra pixels in there which are going to be able to represent that graphic. So the trick here is to set the background size in conjunction with specifying larger graphics for devices that have high-resolution displays. Now with our promo graphics supporting high-resolution displays, next we'll work on the logos and the banners.
Find answers to the most frequently asked questions about Creating a Responsive Web Design.
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.