From the course: CSS Shorts

Unlock this course with a free trial

Join today to access over 22,600 courses taught by industry experts.

Detect screen resolution

Detect screen resolution - CSS Tutorial

From the course: CSS Shorts

Start my 1-month free trial Buy for my team

Detect screen resolution

“

- [Chris] Hi, this is Chris Converse, and in this episode, we'll detect a user's screen resolution with CSS, then switch our imagery to match their resolution, giving us better-looking images on varying devices. So if you'd like to follow along, download the exercise files, and we'll begin by opening the HTML file in a text editor. And when you have the HTML file open, you'll see in the head area we have a link to style.css, which we'll be opening in a moment. If I scroll down inside of the body area, we have a header and a main section. Inside of the main section, we have three links. Inside of the link element, we have a span with the name of each landmark, and what we're doing in the CSS is using a background image to put in these graphics, and we're going to use this technique to not only detect the individual graphics, but detect the resolution of the screen. So to do this, let's go back to the exercise files. Now, inside of the exercise files, there's an images directory. If we…

Contents