-1

have a problem with using media query for changing font-weight. So, im using font-weight: 100; only for Retina. And font-weight: 300 for PC's.

That's my CSS: 

@media all and (-webkit-min-device-pixel-ratio : 2) {
a {
    font-weight: 100;
}
}
a {
    font-weight: 300;
}

Browser just ignores @media and using the font-weight: 300

Evgeny
  • 1
  • 2

1 Answers1

0

You need to apply your mediaqueried CSS after the general definition, as media queries have no higher specificity than un-mediaqueried CSS rules.

Also, you forgot to put the closing bracket of your media query, so both css rules belong to the media query and get applied, the latter one "winning". Fix it:

a {
    font-weight: 700;
}
@media all and (-webkit-min-device-pixel-ratio : 2) {
    a {
        font-weight: 100;
    }
} /* <- close your media query properly */

It works then.

Edit:

The reason it still seems to be not working for you (which it does) may also be that there is no difference in display between those two font-weights. Try to apply 700 and 100, and you'll see it works.

http://codepen.io/anon/pen/xGdpEy

Community
  • 1
  • 1
connexo
  • 53,704
  • 14
  • 91
  • 128
  • sorry, for confusing, actually i have this in code, just missed here. still dosn't work – Evgeny Jun 08 '15 at 08:10
  • Still not working :( Browser ignores @media and if i put `@media` upper, @media css works, if i put simple `a { ... }` upper - it works. – Evgeny Jun 08 '15 at 08:36
  • I have checked on my MBP Retina Late 2013 @1920x1200 and 2840x1800 in Chrome and Safari (both latest versions). It **does** work flawlessly here. – connexo Jun 08 '15 at 09:38
  • Did you re-check? Also, how did you find out that your browser ignores your style definition in the media query? By the looks, or have you checked in Chrome Developer Tools? – connexo Jun 08 '15 at 11:36