ResponsiveTemplate3

Using CSS Media Queries

What are Media Queries?

Everything you need to know.
Everything you need to know.

Media queries are used in CSS stylesheets to determine styles are applied based on width, height, color, screen orientation, etc. The styles that are placed inside of the media query will only be applied to that specific query. Media queries use min or max to determine if the query should be less than or equal to or greater than or equal to instead of using <= or >= min and max are used this way it doesn’t interfere with HTML structure.

Using Media Queries

Now we get to the fun part of actually implementing Media Queries into our website. There are two ways you can use them which is through an external stylesheet or directly on the page.

First (external stylesheet)

Picture 1Picture 5

lets create a folder and name it “cheer” or whatever you want. Once you have your folder create a new css file and save it in that folder. I am calling mine “styles.css” also create an html page and name that “index.html”

Once those are created we will open up “index.html” and start off by making an html5 document.

 

Now that we have our html page set up lets import the stylesheet

 

Now let’s jump into working with media queries when using media queries we can tell styles when to be applied through width, height, color, screen orientation and more, below we are going to use pixels.

This is your media query which basically is saying if the width is less than 480px then use this style

 

We can change the background color to blue just for any screen under 480px like this.

Now the blue background will only be applied to screens under 480px wide or smaller.

 

What’s the difference with max-device-width & max-width

The difference between them is that max-device-width targets devices like iphone & android while max-width targets web browsers themselves.

Let’s switch to max-device width.

As you will see when you change to max-device-width it won’t apply the style to any device over 480px wide.

If you wanted to target a device in landscape made you could do this.

 

This media query is targeting any browser with the width of 480px or lower and only landscape oriented devices.

 

You can use em’s in your media queries also but just be aware that using em’s gets a little bit tricky, but I suppose anythings better than using pixels.

 

The first query will target any handheld phone or tablet with a width greater than 20em’s and the second one is targeting screen which could be any device as long as it’s over 20em’s. Both stylesheets will apply the styles posted in between the brackets.

I would get into targeting colors but I find that pointless. Instead we will learn how to target specific devices.

These are all the standard queries you will need.

Each device has it’s own size but usually for mobile devices max-device-width 480px usually does the job. Tablet devices would use max-device-width 720px and you can also target landscape or portrait orientations.

Here is a list of the current resolutions that devices have.

Picture 6

Rate This Article:

[yasr_visitor_votes size=”medium”]