CSS ResponsiveLesson 91Free preview

RWD Media Queries

This lesson is part of CSS · All levels

Summary

Media query is the primary tool of RWD to enable different styles at a particular screen width point called a breakpoint. The `min-width` condition is used to add upward (mobile-first) style, while `max-width` is used to exclude small screen style. Selecting a breakpoint should be based on content needs, not just device names.

Key points

Breakpoint is a wide point where the layout needs to be changed
`@media (min-width: X)` active from the width of X and so on upwards
The declaration within the media query block overlaps the external declaration for the same property
Mobile-first practices write basic styles first, then expand with `min-width`

Full lesson

Code examples and quizzes

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