Create a Media Query, Responsive Web Design

Lesson Summary

In this first lesson from the freeCodeCamp's Responsive Web Design Principles course we start off our adventure looking at CSS media queries. CSS3 introduced media queries. A media query allows us to target certain devices based on their screen size. For example, we can target devices with a screen-width of 350px or less, and only apply certain CSS styles when a device meets those requirements. Or if we want to target devices that meet a certain height, we can do that as well. Media queries allow us to show smaller text on smaller screens, and bigger text on bigger screens. This is beneficial because if we always show big letters, they will look huge on small screens and vice versa too. If we show small letters all the time, then they may become hard to see on bigger screens.

Subscribe To Monthly Newsletter. Chance to Win Monthly Prizes

* indicates required