Using Media Queries in CSS

After you have finished styling your web app, you may notice that your website doesn’t look nearly as nice once you switch the display to something larger or smaller such as mobile devices or larger screens. But how do we style our websites for other sized devices and screens? The answer lies in media queries.

• How do Media Queries Work?
  So now that you know media queries help with styling different screen sizes, you might be wondering how they work and how hard the learning curve is. In short, media queries allow us to target a specific range of pixels or screen sizes and make changes to our CSS only when the screen size falls within the specific range of pixels that you’ve chosen. We will come back to how this works in a second but there is no need to worry because the learning curve for media queries is almost non-existent. This is due to the fact that using media queries is almost exactly the same as just using plain CSS so the learning curve will ultimately depend on how well you know CSS itself.

• Viewing Different Screen Sizes Within Your Browser
  Before diving into the syntax for media queries, we should discuss how to view your web app for multiple different screen sizes. If you don’t know how to do it, simply right click your screen in your web browser and select the inspect option (you can also do this by pressing Ctrl + Shift + I). Once you have done this look for the option called Toggle Device Toolbar (Ctrl + Shift + M).

• Toggle Device Toolbar option
  From here you can choose from a list of pre-selected screen sizes for common devices as well as set your own custom screen size with the Responsive option which will allow you to type in the desired amount of pixels for width and height. This will change the display of your web app which will let you see how it looks on other devices and screens.

• Looking at Media Query Syntax
  The syntax for media queries is pretty straight forward and easy to learn. There are four main targeting features that we will be looking at today which include min-width, max-width, min-height, and max-height.

To start using media queries simply type in the following code in a new line:

@media () {
/* Your new CSS changes go here */
}

The only thing left to do at this point is to specify when you want your changes to take effect. We can achieve this by using min-width, and max-width targeting features. This is the most confusing part about using media queries but I’ll do my best to break each feature down so that you can understand them and know when to use what.
min-width
To use the min-width targeting feature, we simply add it in between the parenthesis in our initial media statement like so:

@media (min-width: 1600px) {
/* Your new CSS changes go here */
}

In the example above, the min-width property will target any screen with a width of 1600px or greater. You can also think of this as the minimum screen size that this media query will target is 1600px or greater, this same way of thinking applies with the other targeting features.
max-width
Max width will do the exact opposite of min-width by targeting all screen sizes that are less than or equal to the number of pixels you chose. The syntax follows the same structure.

@media (max-width: 600px) {
/* Your new CSS changes go here */
}

The code above will execute on all screens with a width of 600px or less. You should also note that you can also use min-height and max-height properties which will do the exact same thing as the width properties but with height instead. If you’d like to see media queries in action, this video does a great job of explaining them and how they work.

• Targeting Specific Screen Sizes
  One final thing I would like to touch upon that somewhat confused me at first is how to target a single specific screen size. We can achieve this with a slightly different syntax which is as follows:

@media (min-width: 767px)and (max-width: 768px) {
/* This will target your specific screen size*/
}

We can also use this method to target screen sizes that fall within a certain range of pixels. Simply set the min and max values to your desired sizes to have a media query affect a certain range of devices. Hopefully, this article helps you better understand media queries and how they work.

Sources:
https://stackoverflow.com/questions/38425631/css-making-a-div-exactly-300-pixels-high-regardless-of-dpi-of-mobile-device/38425875
https://developer.mozilla.org/en-US/docs/Web/CSS/Media_Queries/Using_media_queries
https://ilovecoding.org/courses/random/lessons/media-query-what-makes-responsive-design-possible