0

Could anyone explain to me what this means?

@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
    only screen and (min-resolution: 1.5dppx),
    only screen and (min-resolution: 144dpi)
    and (min-width: 38em) {    

    /*Styles*/       
}

There is a style that I would like to apply for retina only on resolutions with at least 38em width (both conditions must be true). But it doesn't seem to be working when I insert it in the above block.

Daniel Widdis
  • 8,424
  • 13
  • 41
  • 63
user2472523
  • 113
  • 1
  • 2
  • 6
  • Small note on the problem: on a retina iPhone, I am able to see the style I added in the block. However, since the resolution is lower than 38em, it should not apply. – user2472523 Mar 31 '14 at 19:45
  • Your comment says that the problem is the opposite of the problem described in the question. So what is it? – Mr Lister Apr 01 '14 at 06:49
  • Anyway, the media query says that the style should be applied to screens with a 1.5 device pixel ratio, and also to screens with 144dpi larger than 38em. Since your iPhone does have the high device pixel ratio, that rule applies, and the browser doesn't mind about the last rule. – Mr Lister Apr 01 '14 at 06:52

1 Answers1

0

You have 3 sets of conditions on this media query.

A media query consists of a media type and zero or more expressions that check for the conditions of particular media features.

The 1st condition states that webkit devices (usually Apple and Android based devices) with a pixel ratio of 1.5 or bigger will execute the following styles.

The 2nd condition I don't believe is correct based on the W3C specification. I guess you meant dpi (dots per CSS ‘inch’) or dpcm (dots per CSS ‘centimeter’).

The 3rd condition states that devices with a minimum resolution of 144 dots per inch and minimum width of 38 em will execute the following styles. Note that em is a relative measure based on a previous definition of the font-size in pixels.

Oriol
  • 11,660
  • 5
  • 35
  • 37