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