hiDPI.js 1.1 KB

123456789101112131415161718192021222324252627282930313233343536373839
  1. "use strict";
  2. exports.__esModule = true;
  3. exports["default"] = hiDPI;
  4. /**
  5. * Generates a media query to target HiDPI devices.
  6. *
  7. * @example
  8. * // Styles as object usage
  9. * const styles = {
  10. * [hiDPI(1.5)]: {
  11. * width: 200px;
  12. * }
  13. * }
  14. *
  15. * // styled-components usage
  16. * const div = styled.div`
  17. * ${hiDPI(1.5)} {
  18. * width: 200px;
  19. * }
  20. * `
  21. *
  22. * // CSS as JS Output
  23. *
  24. * '@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
  25. * only screen and (min--moz-device-pixel-ratio: 1.5),
  26. * only screen and (-o-min-device-pixel-ratio: 1.5/1),
  27. * only screen and (min-resolution: 144dpi),
  28. * only screen and (min-resolution: 1.5dppx)': {
  29. * 'width': '200px',
  30. * }
  31. */
  32. function hiDPI(ratio) {
  33. if (ratio === void 0) {
  34. ratio = 1.3;
  35. }
  36. return "\n @media only screen and (-webkit-min-device-pixel-ratio: " + ratio + "),\n only screen and (min--moz-device-pixel-ratio: " + ratio + "),\n only screen and (-o-min-device-pixel-ratio: " + ratio + "/1),\n only screen and (min-resolution: " + Math.round(ratio * 96) + "dpi),\n only screen and (min-resolution: " + ratio + "dppx)\n ";
  37. }
  38. module.exports = exports.default;