Video Thumbnail

Sign up for a plan to instantly unlock all premium lessons.

Premium Features

Download Video

Media Queries

Published 2 months ago

Media queries are a part of CSS that allow you to determine what styles should be applied to certain screen sizes. Rather than redevelop everything for a mobile view, media queries allow us to take what we already have, and alter it so it fits on a mobile screen.

To write a media query, you must start of with the @media declaration, then declare what screen size you want your media query to take effect on:

<style>
@media (min-width: 640px) {

}
</style>

Here we have a media query that says apply any classes listed out inside of the brackets, only if the users' screen size is more than 640px wide. If you wanted a class that affected only your mobile view, you would write it outside of the media query's brackets, as the media query content is meant to override any similar mobile classes.

Comments

Want to participate?

Create a free Chris Courses account to begin

Login

No comments yet, be the first to add one

Cheat Sheet Preview

Download The Official Chris Courses HTML5 Canvas Cheat Sheet

Essential canvas syntax at your fingertips.

Download Now

Providing the lift to launch your development career

© 2021 Chris Courses. All rights reserved.