Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn
Media Queries

Review: Media Queries

Incredible work! You learned how to change the way a website appears on different screens with media queries and breakpoints

Throughout this lesson, you learned:

  • When a website responds to the size of the screen it's viewed on, it’s called a responsive website.
  • You can write media queries to help with different screen sizes.
  • Media queries require media features. Media features are the conditions that must be met to render the CSS within a media query.
  • Media features can detect many aspects of a user's browser, including the screen's width, height, resolution, orientation, and more.
  • The and operator requires multiple media features to be true at once.
  • A comma separated list of media features only requires one media feature to be true for the code within to be applied.
  • The best practice for identifying where media queries should be set is by resizing the browser to determine where the content naturally breaks. Natural breakpoints are found by resizing the browser.

With your knowledge of media queries and CSS, you can make websites that look great on any device, from a small phone to a huge television. By making your websites responsive, you'll make it possible for any of your users to have a great experience.

Instructions

Click 'Up Next' to continue.

Report a Bug
If you see a bug or any other issue with this page, please report it here.