Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PR for #1474: Update high resoultion media query #1691

Closed
wants to merge 1 commit into from

Conversation

drublic
Copy link
Member

@drublic drublic commented Apr 7, 2015

A PR for #1474.

Please keep the discussion within #1474.

@@ -1,3 +1,6 @@
* Update high resoultion media query

This comment was marked as abuse.

This comment was marked as abuse.

This commit adds a the dppx variant of min-resolution to add an easier
to use value for the media query. `dppx` is not supported by all
browsers and needs the `dpi` fallblack.
`dppx` is more acurate than `dpi` since dots per inch refers to a
defined size of pixels wher one inch is 96px what so ever and does not
take physical inches into account.
Autoprefixer will include `-webkit-min-device-pixel-ratio` which is
needed for Safari and WebKit devices.

Reference #1474.
@@ -1,3 +1,6 @@
* Update high resolution media query

This comment was marked as abuse.

This comment was marked as abuse.

@drublic drublic closed this in 0d9f008 Apr 10, 2015
@alrra
Copy link
Member

alrra commented Apr 10, 2015

Merged with some modification in 0d9f008. Thanks @drublic!

@alrra alrra deleted the update-hires-mq branch April 10, 2015 11:42
@alrra alrra added this to the 5.2.0 milestone Apr 10, 2015
eleanor-byhook pushed a commit to eleanor-byhook/html5-boilerplate that referenced this pull request Feb 29, 2016
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 h5bp/html5-boilerplate#1474
Close h5bp/html5-boilerplate#1691
jeffreznik pushed a commit to jeffreznik/sw-test that referenced this pull request Oct 15, 2017
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 h5bp#1474
Close h5bp#1691
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

3 participants