Media Queries - CONTENT

Intro to Media Queries

What are media queries?

• Media queries are CSS instructions essential to building modern websites and blogs
• They allow different css instructions to be used for different sized screens

Media queries allow you to present the same content differently on different size screens. Most people think of them as a way to make the same webpage look good on a phone or a desktop computer.

What do media queries do?

Media queries provide different instructions (css) for different size screens.

So in human terms we can say something like...

"When someone is on a desktop computer I want my webpage text to be red, when someone is on a mobile phone I want my webpage text to be green."

Pretty much everything you can do with CSS, you can do with media queries. What most folks want to do is to simply make sure that their webpages look great on whatever screen they are viewed on.

How do media queries work?

In a nutshell, they do two things.

• They find out how big a screen is
• They apply CSS for the size of the screen found

Working with media queries

Media queries are part of your CSS file. Let's use the example we mentioned above. We said we wanted red text for desktops and green text for mobile.

Here is an example of CSS that will do that...

Let's translate that now by looking at each piece and describing it in a way that doesn't melt our brains.

The first line is just normal CSS..

It says that the color of text will be green.

The second line is a media query...

This line says "If the screen is wider than 900 pixels then the color of the text should be red". But let's break it down more...

Our media query is saying...

1. @media - This means a media query is about to happen
2. (min-width:900px){} - This means that if the screen is at least 900 pixels wide, the css between the brackets should be applied.
3. p{color:red;} - This is CSS that should be applied if the screen is wider than 900 pixels

Using media queries for responsive design

In our example above you may have noticed that the desktop version with red text was explicitly stated as a media query, but the mobile version with green text was not.

Remember, our css was...

• The first line is just normal CSS (non conditional set of instructions)
• The second line is the media query (a conditional set of instructions)

So if someone using a mobile phone or tablet visits that page, they will see green text (using the normal css). The red text only will occur when a screen wider than 900 pixels like a desktop is being used (which then triggers the media query).

This is sometimes referred to as mobile first design, but it is simply understanding that media queries are a conditional set of instructions and that the non conditional instructions should be for the smallest screen.

(if this happens - use this css | if this doesn't happen - do not use this css)

Media queries simply allow us to add specific css instructions for specific conditions.

SOURCE: https://varvy.com/mobile/media-queries.html