Code Log 3: CSS Media Queries

What are Media Queries?

Media Queries are CSS code that allow you to apply styles to certain aspects of the screen by testing for various features. Some examples include:

• Height/Width - The height/width of the screen
• Orientation - A test of whether the display is in landscape or portrait mode
• Display-mode - The display mode of the web application (for example fullscreen)
• Max Width - Used to apply CSS code if the screen is less than what is set to the max width (useful for cross-platform design)

How Does a Media Query Work?

A Media Query is basically CSS’s version of an if statement. You use it to check for characteristics of the user’s device. It allows a website to be responsive to the users. Below is an example of usage to change background-colors for screens with 1200px or less.