Intro to Responsive Design (Media Queries)

In this lesson you'll learn the basics of responsive design using media queries, so you can build a page that's easy to view on both phones and computers. This is for people searching "CSS media query usage."

Using @media (max-width: width) { } lets you apply different CSS depending on the screen's width. This is the basic technique for building a page that's easy to view on both phones and computers, and design built this way is called "responsive design."

The sample code shows a .card that's normally green, but switches to pink once the screen width drops to 400px or below, when the rule @media (max-width: 400px) kicks in. Try actually changing the preview's width and check the moment the background color switches.

A common beginner stumbling block is the order in which media queries are applied. Since CSS generally gives priority to rules written later, a media query needs to be written after the normal styles. Getting the order wrong can mean the style doesn't switch at the screen width you intended.

Today, a large share of visits to a website come from a smartphone. Showing a design built for a computer's large screen as-is on a phone tends to make text too small or break the layout, so adjustment with media queries has become an essential, close-to-mandatory skill.