CSS AdvancedLesson 78Free preview

CSS Media Queries

This lesson is part of CSS · All levels

Summary

Media queries allow us to apply CSS rules based on the condition of the device, most often screen width. With `@media`, different styles can be activated on mobile phones, tablets, or desktops without altering HTML. In addition to width, media queries can also check system orientation and preferences such as dark mode.

Key points

Basic syntax:
`max-width` active for small size down, `min-width` active from size up
Breakpoint was chosen based on where the layout started to feel uncomfortable.
`prefers-color-scheme` and `orientation` are other useful media conditions

Full lesson

Code examples and quizzes

Full lessons, code examples, and quizzes are available to subscribers. 5 questions.