CODEWITHSUNDEEP
htmlcss
JaPerk14
JaPerk14

Reputation: 1664

CSS media query order

I have a question about CSS media queries. My question is whether the order I have my css media queries will make a difference.

For example:

<link rel="stylesheet" href="desktop.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="mobile.css" media="">



<link rel="stylesheet" href="mobile.css" media="">
<link rel="stylesheet" href="laptop.css" media="">
<link rel="stylesheet" href="desktop.css" media="">

Say I were to target desktops, laptops, and mobile devices with several media queries. Would this change how the design is displayed on multiple devices? Does the order that the links are in matter?

Upvotes: 0

Views: 2515

Answers (4)

Kelvin
Kelvin

Reputation: 585

As the last declaration of same css will override the previous, so it should declare the superset of the style and then narrow it down.

For example, Color is generally the same for all desktop, mobile and size of element is different.

Upvotes: 0

piatek
piatek

Reputation: 376

No and generally avoid depending only on using media types like desktop or handheld. Mobile devices are known to fake this query so they get a better stylesheet. Use the more robust media query that specifies screen resolution, pixel density etc. In your stylesheet you would do:

@media (min-width: 768px) and (max-width: 1024px) {
  body {
    background: #ccc;
  }
}

If your queries overlap they are subject to normal cascade and can be overwritten.

Spec: http://www.w3.org/TR/css3-mediaqueries/

Tutorial: http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries

Upvotes: 2

andy
andy

Reputation: 132

You should place the mediaqueries for mobile & laptop first. Because if you use min-width:...px for example, the css will be overridden for bigger screens and will not be overridden if the screen has the min-width.

For example, your mobile.css will be used, when the min-width is 0, your laptop.css for min-width 700 and desktop.css for min-width 1000. If you have a screen which is 800px width, the mobile.css will be used and the laptop.css too, but not the desktop.css. If you do it the other way around, mobile.css will override everytime, because every screen has a min-width of 0px.

Upvotes: 0

Jamie Hutber
Jamie Hutber

Reputation: 28126

The short is yes it will. Quite massively.

But there is a chance that they can have a knock on effect.

As you know Cascading Style Sheets, as the name suggests, cascade through the different styles.

So for example, if you have styles in desktop.css they will roll out to all of the elements in the page. Then laptop.css comes along and has another style that is targeted by desktop.css the style from laptop.css will take precedent. Also, applies to styles from mobile.css

Example:

//Desktop.css
body {
      background: pink;
 }

//laptop.css
body {
      background: yellow;
 }

//mobile.css
body {
      background: green;
 }

Without media quires it means that the background will be green.

If we do this:

//laptop.css
body {
      background: yellow;
 }

//mobile.css
body {
      background: green;
 }

//Desktop.css
body {
      background: pink;
 }

The background will be pink.

Place the items in the order you want them to cascade through the document. Don't place the mobile before desktop unless you want the mobile to be the default version of your site.

Upvotes: 2

Related Questions