Update the high resolution media query

Add `dppx` variant of `min-resolution` to the high resolution media
query as `dppx` is more accurate¹ than `dpi`.

Notes:

 * since `dppx` is not supported by all browsers the media query
   still needs the `dpi` fallback

 * this change removes the `dppx` related warning² from Blink based
   browsers (e.g.: Chrome, Opera)

- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -

¹ `dpi` (dots per inch) refers to a defined size of pixels where one
  inch is `96px` no matter what, so it does not take into consideration
  the physical inches.

² "Consider using 'dppx' units, as in CSS 'dpi' means dots-per-CSS-inch,
   not dots-per-physical-inch, so does not correspond to the actual 'dpi'
   of a screen. In media query expression: print,
   (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi)"

Fix #1474
Close #1691

CHANGELOG.md

@@ -1,5 +1,7 @@
 ### HEAD
 
+* Update high resolution media query
+  ([#1474](https://github.com/h5bp/html5-boilerplate/issues/1474)).
 * Update Apache Server Configs to `v2.14.0`.
 
 ### 5.1.0 (April 1, 2015)

dist/css/main.css

@@ -197,6 +197,7 @@ textarea {
 
 @media print,
        (-webkit-min-device-pixel-ratio: 1.25),
+       (min-resolution: 1.25dppx),
        (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
 }

src/css/main.css

@@ -189,6 +189,7 @@ textarea {
 }
 
 @media print,
+       (min-resolution: 1.25dppx),
        (min-resolution: 120dpi) {
     /* Style adjustments for high resolution devices */
 }