From the course: Advanced CSS Media Queries
Unlock the full course today
Join today to access over 22,600 courses taught by industry experts or purchase this course individually.
Testing for screen orientation - CSS Tutorial
From the course: Advanced CSS Media Queries
Testing for screen orientation
- [Illustrator] You probably know that your phone and your tablet screens can be rotated into portrait mode or a vertical rectangle or into landscape mode, which is a horizontal rectangle. You can also test for this orientation with a media query and make changes to your screen accordingly. However, there's one confusing aspect to this, portrait and landscape don't refer to the orientation of your device. Instead think of these as relative terms. If the browser window is wider than it is tall, it corresponds to landscape mode. If the browser window is taller than it is wide, then it's considered in portrait mode. That means that portrait and landscape media queries work on mobile devices, but they also work on desktop computers. Let's see that in action. So inside of your code pen, for this particular example, I'm going to scroll on down here to the bottom and go ahead and add some new media queries. So let's just say I'm…
Practice while you learn with exercise files
Download the files the instructor uses to teach the course. Follow along and learn by watching, listening and practicing.
Contents
-
-
-
Understanding media in media queries3m 4s
-
(Locked)
Changing media in media queries5m 48s
-
(Locked)
Including width in media queries6m 16s
-
(Locked)
Including height in media queries3m 10s
-
(Locked)
Including aspect ratio in media queries3m 55s
-
(Locked)
Testing for monochrome devices2m 4s
-
(Locked)
Testing for screen orientation3m 23s
-
(Locked)
Testing for screen resolution4m 18s
-
(Locked)
Testing for hover and pointer5m 4s
-
-
-