CODEWITHSUNDEEP
cssmedia-queries
Malasorte
Malasorte

Reputation: 1173

Media Queries logic (priority)

Here is a simple CSS:

/* Smartphones (portrait and landscape) ----------- */
@media only screen and (min-device-width : 320px) and (max-device-width : 480px) {
.test {
background-image: url('red.png');
}
}

/* Desktop ----------- */
.test {
background-image: url('blue.png');
font-size: 100px;
}

Question 1: If I visit this website using a smartphone, will the browser also download file "blue.png" ? (even if not shown on screen)

Question 2: If I visit this website using a smartphone, will the font size be 100px? (for font-size the mobile style has nothing declared).

Question 3: If I visit this website using a smartphone, does the browser totally ignore the second .test class (for desktop?). If yes, would the browser ignore it if in the CSS file it would appear before the mobile class?

Thank you!

Upvotes: 2

Views: 1074

Answers (3)

Claudio
Claudio

Reputation: 904

Question 1:
As @cport1 mentioned in the comments, you can pretty much see the results here.
Overwriting the background-image with another image will work on majority of browsers.
However, you should create another media query with the default background (larger than mobile).

For Question 2:
Yes, the font-size will be the same across all devices.
Pixels are the same size on all devices. em is a more mobile-friendly size unit.

Question 3:
Properties not defined Media Queries will be inherited from the class outside the query (if possible).
Simply: no.

Upvotes: 2

Fabrizio Calderan
Fabrizio Calderan

Reputation: 123397

Q1 : it depends. If your page contains an element with that class, then the blue.png background will be downloaded.

Q2 : yes, exactly as above

Q3 : no, because the second rule is not limited by any mediaquery so, no matter which device you're using, it will be always applied.

Upvotes: 2

Extranion
Extranion

Reputation: 608

Question 1:

Only the blue.png will be downloaded, it ignores the red one (you overwrite it)

Question 2: yes font-size is 100px on mobile

Question 3: No it will be applied!

example: http://jsbin.com/fohuzakeki/1/edit?html,css,js,output

You can better apply mobile first without media queries and then built the dekstop site with media queries using min-width

Upvotes: 2

Related Questions