{"_id":"@1natsu/handy-media-query","_rev":"3-baf0684076f29902d481cbc1ed546958","name":"@1natsu/handy-media-query","dist-tags":{"latest":"1.0.2"},"versions":{"1.0.0":{"name":"@1natsu/handy-media-query","version":"1.0.0","description":"better media-query for... (e.g. styled-components, emotion, ...)","publishConfig":{"access":"public"},"author":{"name":"1natsu"},"contributors":[{"name":"1natsu"}],"license":"MIT","private":false,"bugs":{"url":"https://github.com/1natsu172/handy-media-query/issues","email":"1natsu172@users.noreply.github.com"},"repository":{"type":"git","url":"git+https://github.com/1natsu172/handy-media-query.git"},"typings":"dist/types/index.d.ts","module":"dist/es/index.js","main":"dist/cjs/index.js","homepage":"https://github.com/1natsu172/handy-media-query","engines":{"node":">=9"},"browserslist":["last 2 versions","not dead"],"scripts":{"test":"jest","clean":"shx rm -rf dist","prebuild":"npm run clean","build":"npm run build:esnext && npm run build:esm && npm run build:cjs","build:esnext":"tsc --module esnext --target esnext --outDir dist/es --project tsconfig.prod.json","build:esm":"tsc --module esnext --target es5 --outDir dist/esm --project tsconfig.prod.json","build:cjs":"tsc --module commonjs --target es5 --outDir dist/cjs --project tsconfig.prod.json"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"devDependencies":{"@types/jest":"^23.3.10","husky":"^1.2.0","jest":"^23.6.0","lint-staged":"^8.1.0","prettier":"^1.15.3","shx":"^0.3.2","ts-jest":"^23.10.5","tslint":"^5.11.0","tslint-config-airbnb":"^5.11.1","tslint-config-prettier":"^1.17.0","tslint-plugin-prettier":"^2.0.1","typescript":"^3.2.1"},"keywords":["css","jsx","media-query","emotion","styled-components","css-in-js"],"gitHead":"d9b3f1ffceaa543d94dad4fcad444624cf967501","_id":"@1natsu/handy-media-query@1.0.0","_npmVersion":"6.4.1","_nodeVersion":"11.3.0","_npmUser":{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"},"dist":{"integrity":"sha512-KKWT/SKZP5yi7X18BThKNv/VF5QNnw3zYLjU/P4ZTTdmqy2p/kfSQSeJMysPCBkro+rSyDbZYPuinNmkKUHcMw==","shasum":"73eb7c71b990d8c5a65c51bd40fe9f31da0863de","tarball":"https://registry.npmjs.org/@1natsu/handy-media-query/-/handy-media-query-1.0.0.tgz","fileCount":26,"unpackedSize":24022,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFKqwCRA9TVsSAnZWagAANaAQAJplt0NWOnyU5tZWL03F\nKuj7XQMUw4CCfL8/oKbRS1OKqdRddzeb/MXza170W7qORcVYzkoq/R3/Xfde\njCXMhFFUlNLtCBAqFFyN97iy+QPCc+X408siunWf01hDVT+j4NY3dJEfww2p\nVzfrPWWFn+tuEN0UEeHaUaRLeXViCnUtWSKVcd/gcSL/ijMDNfqAv07ziAiV\nQavVZL8+w9aN3yi50eGYklfpHhW8sQu4+TEreOUK6SuK8vZ4YWRADqNI5JFu\ng9lFoiSfM4M5Pwy0dxentGPvc/joesEtCvgyMx7xIC/iQieDnMGmg8ghlBwc\nJglMNpd2Fay3mS/QFU7oF0XFHfitLMCkWf3xmcJi5eQW5cNIfs25G4xzgXu8\nfq9DhLaHA9NYD9QuJvyy7jwB0qDchcTtBluKSAit0czWZGp8+PA1qAVJCHk3\nZVBaDIImhiPMFlLlY4fMGcOZfpss/bXWbw5aPLBeHpKZU1rbAEhoxXtAavRO\nPOPJhPgdNVB7GIlUQDDna4jP/3MKH5td7LpZKBksL9fE9UE3upVj/myNra1N\nRgDBrklfpxo2Al0xhekOgGaoD4ygCsWlp59fJX7YSK8AP9CGw3sJP9NN3Dz4\nL0AI9aZa+HJKxGAqgAxENPsFLBvyRHBH2YXG3z2S8ByVR0SCaGy/YJGMNSI8\ngmtF\r\n=08lQ\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCIH+CO9mRPUv8qQnkN8okNFAgLaO4xFB7nj8fnpmgG5aGAiAwlwbkpgDT8/YwcrbxyqfjfvhvU/xEBne5GrXDGYry6Q=="}]},"maintainers":[{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/handy-media-query_1.0.0_1544858287799_0.2648798493103246"},"_hasShrinkwrap":false},"1.0.1":{"name":"@1natsu/handy-media-query","version":"1.0.1","description":"better media-query for... (e.g. styled-components, emotion, ...)","publishConfig":{"access":"public"},"author":{"name":"1natsu"},"contributors":[{"name":"1natsu"}],"license":"MIT","private":false,"bugs":{"url":"https://github.com/1natsu172/handy-media-query/issues","email":"1natsu172@users.noreply.github.com"},"repository":{"type":"git","url":"git+https://github.com/1natsu172/handy-media-query.git"},"typings":"dist/types/index.d.ts","module":"dist/es/index.js","main":"dist/cjs/index.js","homepage":"https://github.com/1natsu172/handy-media-query","engines":{"node":">=9"},"browserslist":["last 2 versions","not dead"],"scripts":{"test":"jest","clean":"shx rm -rf dist","prebuild":"npm run clean","build":"npm run build:esnext && npm run build:esm && npm run build:cjs","build:esnext":"tsc --module esnext --target esnext --outDir dist/es --project tsconfig.prod.json","build:esm":"tsc --module esnext --target es5 --outDir dist/esm --project tsconfig.prod.json","build:cjs":"tsc --module commonjs --target es5 --outDir dist/cjs --project tsconfig.prod.json"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"devDependencies":{"@types/jest":"^23.3.10","husky":"^1.2.0","jest":"^23.6.0","lint-staged":"^8.1.0","prettier":"^1.15.3","shx":"^0.3.2","ts-jest":"^23.10.5","tslint":"^5.11.0","tslint-config-airbnb":"^5.11.1","tslint-config-prettier":"^1.17.0","tslint-plugin-prettier":"^2.0.1","typescript":"^3.2.1"},"keywords":["css","jsx","media-query","emotion","styled-components","css-in-js"],"gitHead":"f9dc7ee0523dbd035e36f1775e6d47391e7e586e","_id":"@1natsu/handy-media-query@1.0.1","_npmVersion":"6.4.1","_nodeVersion":"11.3.0","_npmUser":{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"},"dist":{"integrity":"sha512-j3qyJT34gOCLcdNnVT4bcP1ddZMSz+ZOTdPWrVeP1oIwAyfVdjBztdxMJk7JGSJn2P6UBfHHXyjNj61gbvAjEg==","shasum":"cf1666d12b2a9c302da22536f3f03022c07d9e9c","tarball":"https://registry.npmjs.org/@1natsu/handy-media-query/-/handy-media-query-1.0.1.tgz","fileCount":26,"unpackedSize":23883,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcFKt7CRA9TVsSAnZWagAAH3MQAJP0ThlvWgvwU6AOnV2X\ntl9gJBj7vU/uMAhDlILzZGsxJ5qgnBzDC2uQUPogEraQPycmAZ8TWDHUK834\nTnhKqnU6P67f62rMxKKtVHUHLrgP0vsHN5pjptdFsXo6ldsESuY1QFSge5Cr\nU8twljk6AqMUvf68AAwy0k52TX2/kJ+fRRnc8ybipvfsPHqBdBBGjkCWtxSh\n1dPWEfq0J8r9TQDKlbUgYwBDg34dy4fokP2dmxuPxyRx6hGFn5jGQMwzKTYG\nXx8+SlB6j+C4d2Q1m/r16tF3gFm/lK7z3Ul71o7Z/39D5jzqDtxTmzYcIbtf\ntfs5SRFkuLlYLcJVqW2TDOwKZrFOd/olVvPtx/B0QNOkkc0x+n+VMGYQeAOR\nwIzmgaOfEYHvpk4HtwzHSaz5Rd/g9HdoTWu68tku5T6+YhmqUuc6Dzc6FOtM\npRSn6vIlhJrc5m4DZZ/nPSVS8DdoPIhmkRLc+hSL6Pib64h5vMwXveWGuMMe\nN4oDwyrDy22sc3DpM2HACbkOXMEzc+PxE3VIT6glQ235gTyYwVdgqcRhBkCz\nLpdOTGZdDFP/tSniFmPrL0Iov4iO980EuWayPcR8SvfBUkgiyebVROZwL5V0\nzdbJtUx/KafK9cL/64hPGT/BZNwqDt7ZsSU/zd3i+oVIrtuNBOANUYYI58rQ\nNSy+\r\n=SyTv\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEQCICmAvtwz7bjnTgnGA+2FR7wKyER3oO54ymvSTijf20KqAiAyKJFQe2VcGuXi0Ui0kfmwumv8MsR18QI9YMwevf670g=="}]},"maintainers":[{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/handy-media-query_1.0.1_1544858491418_0.16478204796984963"},"_hasShrinkwrap":false},"1.0.2":{"name":"@1natsu/handy-media-query","version":"1.0.2","description":"better media-query for... (e.g. styled-components, emotion, ...)","publishConfig":{"access":"public"},"author":{"name":"1natsu"},"contributors":[{"name":"1natsu"}],"license":"MIT","private":false,"bugs":{"url":"https://github.com/1natsu172/handy-media-query/issues","email":"1natsu172@users.noreply.github.com"},"repository":{"type":"git","url":"git+https://github.com/1natsu172/handy-media-query.git"},"typings":"dist/types/index.d.ts","module":"dist/es/index.js","main":"dist/cjs/index.js","homepage":"https://github.com/1natsu172/handy-media-query","engines":{"node":">=9"},"browserslist":["last 2 versions","not dead"],"scripts":{"test":"jest","preversion":"npm run build","clean":"shx rm -rf dist","prebuild":"npm run clean","build":"npm run build:esnext && npm run build:esm && npm run build:cjs","build:esnext":"tsc --module esnext --target esnext --outDir dist/es --project tsconfig.prod.json","build:esm":"tsc --module esnext --target es5 --outDir dist/esm --project tsconfig.prod.json","build:cjs":"tsc --module commonjs --target es5 --outDir dist/cjs --project tsconfig.prod.json"},"husky":{"hooks":{"pre-commit":"lint-staged"}},"lint-staged":{"*.{ts,tsx}":["tslint --fix","git add"]},"devDependencies":{"@types/jest":"^23.3.10","husky":"^1.2.0","jest":"^23.6.0","lint-staged":"^8.1.0","prettier":"^1.15.3","shx":"^0.3.2","ts-jest":"^23.10.5","tslint":"^5.11.0","tslint-config-airbnb":"^5.11.1","tslint-config-prettier":"^1.17.0","tslint-plugin-prettier":"^2.0.1","typescript":"^3.2.1"},"keywords":["css","jsx","media-query","emotion","styled-components","css-in-js"],"gitHead":"ef94b868d16be2978985917d712fdd7e3463bed7","_id":"@1natsu/handy-media-query@1.0.2","_npmVersion":"6.4.1","_nodeVersion":"11.3.0","_npmUser":{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"},"dist":{"integrity":"sha512-ZNm7zxyEjhvFZsV73PYMw1Nst8P8GTy9SpDSPgKSGX4TttuMB1yhieksjElvSLSlR/sqfW8CX0dVdyaKo0bxVg==","shasum":"23a2f3250204bae16436bbffd855e5a8647fe639","tarball":"https://registry.npmjs.org/@1natsu/handy-media-query/-/handy-media-query-1.0.2.tgz","fileCount":27,"unpackedSize":25491,"npm-signature":"-----BEGIN PGP SIGNATURE-----\r\nVersion: OpenPGP.js v3.0.4\r\nComment: https://openpgpjs.org\r\n\r\nwsFcBAEBCAAQBQJcOGQ1CRA9TVsSAnZWagAA1aYP/jy/mHcZVwobv1Hdk1O1\n1ek4bwsScApFU+bKB0QW1BMbcJ5h+D1f1eUN9H7AArf8xzHci3193y+sNRV3\nU/ARQVPYJvsPMIGu3iVYkyLauPhUrNe3y62CWjSU59fO1Bn+rczm8HThWyj6\nNhf42ny7qJoaQBshGCyaGFWVMPYHVj7bLSjjp+wzfHn1WLdXIp8wh7FwBEJT\npE3Fb/xIjklt3g/fe+1NISWcWuH4X7PlqZllsrdA6pP+B0pDwM4R2B+LBVHi\nKuLPlDqfnrC1FP5vLa2+b4vtQiIPnifXyBJ/aG/RUKkM2FNmMjO1/dcHDHi4\naxsMdmjWxKgIGwtmHa2yLZeIXEwYJjL/7ZcMa4Rxe0t3dpDTsb0wYGFcVsRF\ndp+Op5+SlS5RgxaFCYfIXa4tVQb64Z1Dm8Yi4F3TuatEn/1EFHSr6WWuyKH3\n930TNvxHX9/Edql/YtgK1pDbaiq49JRyPAVwVHrupMdmxcYL2QINl293MkV+\nESEmM3sdCjBIh7m61i4egqtWM2dGoIL+UKzewHYhEzU5V20EJ+HMPb+p98Qo\n9sc2EWZMlWfzv26fTF/ecX4aEzD2D1xGAqiFyvkIIn2yzlPgcVB2CqFD7f8e\nWsNTODAdwIp/T73WbAwDksCLxmZP2d/NIKt2lH4CRh3hc73UlvMA/9LOykLs\nAG10\r\n=jgtH\r\n-----END PGP SIGNATURE-----\r\n","signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEYCIQD8pag40v437w8bmeEVVENCo/16MfH2jTYNCxAgkfWwoQIhAL/hfVtVezp3CK0newA7V0pmll8hbsEJ3vOAOkERR1+l"}]},"maintainers":[{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"}],"directories":{},"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/handy-media-query_1.0.2_1547199540873_0.533544106746576"},"_hasShrinkwrap":false}},"time":{"created":"2018-12-15T07:18:07.624Z","1.0.0":"2018-12-15T07:18:07.902Z","modified":"2022-04-04T10:33:48.896Z","1.0.1":"2018-12-15T07:21:31.505Z","1.0.2":"2019-01-11T09:39:00.987Z"},"maintainers":[{"name":"1natsu","email":"1natsummer+support-npm@gmail.com"}],"description":"better media-query for... (e.g. styled-components, emotion, ...)","homepage":"https://github.com/1natsu172/handy-media-query","keywords":["css","jsx","media-query","emotion","styled-components","css-in-js"],"repository":{"type":"git","url":"git+https://github.com/1natsu172/handy-media-query.git"},"contributors":[{"name":"1natsu"}],"author":{"name":"1natsu"},"bugs":{"url":"https://github.com/1natsu172/handy-media-query/issues","email":"1natsu172@users.noreply.github.com"},"license":"MIT","readme":"![](/media/mainVisual-outerline.png)\n\n[![](https://img.shields.io/npm/v/@1natsu/handy-media-query.svg?style=for-the-badge&logo=npm&colorB=cc3534)](https://www.npmjs.com/package/@1natsu/handy-media-query)\n[![](https://img.shields.io/npm/types/@1natsu/handy-media-query.svg?style=for-the-badge&logo=typescript&colorB=007acc)](https://www.npmjs.com/package/@1natsu/handy-media-query)\n[![](https://img.shields.io/circleci/project/github/1natsu172/handy-media-query/master.svg?style=for-the-badge&logo=circleci&colorB=00992B)](https://circleci.com/gh/1natsu172/handy-media-query)\n\n\n**A handy CSS media query methods of JavaScript**\n\n_**Just return the media query string.**_\n\nThe opportunity to use… (e.g. styled-components, emotion, …)\n\n## 🏆 Table of contents\n\n- [🏆 Table of contents](#%F0%9F%8F%86-table-of-contents)\n- [✨ Getting Started](#%E2%9C%A8-getting-started)\n- [💁 Usage](#%F0%9F%92%81-usage)\n  - [Simple](#simple)\n- [😌 Realistic example](#%F0%9F%98%8C-realistic-example)\n  - [maybe as usufull](#maybe-as-usufull)\n- [🔥 APIs](#%F0%9F%94%A5-apis)\n  - [Default exported object](#default-exported-object)\n    - [`#min(minPx, [opts])`](#minminpx-opts)\n    - [`#max(maxPx, [opts])`](#maxmaxpx-opts)\n    - [`#between(minPx, maxPx, [opts])`](#betweenminpx-maxpx-opts)\n      - [DefaultOptions](#defaultoptions)\n  - [Named exported methods](#named-exported-methods)\n    - [`composeMediaQuery(userSelfMediaQuery)`](#composemediaqueryuserselfmediaquery)\n    - [`pxToEm(value, ratio)`](#pxtoemvalue-ratio)\n    - [`pxToRem(value, ratio)`](#pxtoremvalue-ratio)\n- [💚 Running the tests](#%F0%9F%92%9A-running-the-tests)\n- [Contributing](#contributing)\n- [🏷 Versioning](#%F0%9F%8F%B7-versioning)\n- [©️ License](#%C2%A9%EF%B8%8F-license)\n- [🙏 Acknowledgments](#%F0%9F%99%8F-acknowledgments)\n  - [Inspiration](#inspiration)\n\n## ✨ Getting Started\n\nwith **yarn**\n\n```bash\nyarn add @1natsu/handy-media-query\n```\n\nor\n\nwith **npm**\n\n```bash\nnpm install @1natsu/handy-media-query\n```\n\n## 💁 Usage\n\n### Simple\n\n```javascript\nimport mq from '@1natsu/handy-media-query'\n\nmq.max(480) // \"@media all and (max-width: 30em)\"\nmq.between(481,767) // \"@media all and (min-width: 30.0625em) and (max-width: 47.9375em)\"\nmq.min(768) // \"@media all and (min-width: 48em)\"\n```\n\n> By default, the passed px is converted to em.\n\n## 😌 Realistic example\n\n### maybe as usufull\n\n*mediaQuery.js*\n```javascript\nimport mq, { composeMediaQuery, pxToEm } from '@1natsu/handy-media-query'\n\nconst breakpoints = {\n  small: 480,\n  middle: [481, 767],\n  large: 768\n}\n\nconst mediaQueries = composeMediaQuery({\n  small: mq.max(breakpoints.small),\n  middle: mq.between(breakpoints.middle[0], breakpoints.middle[1]),\n  large: mq.min(breakpoints.large),\n  irregular: `@media (min-height: ${pxToEm('680px')}), screen and (orientation: portrait)`\n})\n\nexport { mediaQueries as mq }\n```\n\n*Foo.jsx*\n> As an example a component file with Styled-components(v4)\n\n```javascript\nimport React from 'react'\nimport styled from \"styled-components\";\nimport { mq } from './mediaQuery'\n\n\nconst Foo = ({text}) => <div>{text}</div>\n\nconst StyledFoo = styled(Foo)`\n  color: blue;\n  ${mq.small} {\n    color: red;\n  }\n  ${mq.middle} {\n    color: cyan;\n  }\n  // Local irregular……is also OK\n  ${mq.between(1921,3840)} {\n    color: pink;\n  }\n`\n```\n\n## 🔥 APIs\n\n### Default exported object\n\n```javascript\nimport mq from '@1natsu/handy-media-query'\n```\n\n#### `#min(minPx, [opts])`\n\n| name    | require |       type       |              default              | decstiption                                 |\n| ------- | :-----: | :--------------: | :-------------------------------: | ------------------------------------------- |\n| minPx   |    ✓    | string \\| number |                 -                 | `\"<number>px\"` or `number`(assuming pixels) |\n| options |    -    |      object      | [DefaultOptions](#DefaultOptions) |                                             |\n\n```javascript\nmq.min(480)\n// '@media all and (min-width: 30em)'\n\nmq.min(480, {unit: 'px', mediaType: 'screen'})\n// '@media screen and (min-width: 480px)'\n```\n\n#### `#max(maxPx, [opts])`\n\n| name    | require |       type       |              default              | decstiption                                 |\n| ------- | :-----: | :--------------: | :-------------------------------: | ------------------------------------------- |\n| maxPx   |    ✓    | string \\| number |                 -                 | `\"<number>px\"` or `number`(assuming pixels) |\n| options |    -    |      object      | [DefaultOptions](#DefaultOptions) |                                             |\n\n```javascript\nmq.max(480)\n// '@media all and (max-width: 30em)'\n\nmq.max(480, {unit: 'px', mediaType: 'screen'})\n// '@media screen and (max-width: 480px)'\n```\n\n#### `#between(minPx, maxPx, [opts])`\n\n| name    | require |       type       |              default              | decstiption                                 |\n| ------- | :-----: | :--------------: | :-------------------------------: | ------------------------------------------- |\n| minPx   |    ✓    | string \\| number |                 -                 | `\"<number>px\"` or `number`(assuming pixels) |\n| maxPx   |    ✓    | string \\| number |                 -                 | `\"<number>px\"` or `number`(assuming pixels) |\n| options |    -    |      object      | [DefaultOptions](#DefaultOptions) |                                             |\n\n```javascript\nmq.between(480,980)\n// '@media all and (min-width: 30em) and (max-width: 61.25em)'\n\nmq.between(480, 980, {unit: 'px', mediaType: 'screen'})\n// '@media screen and (min-width: 480px) and (max-width: 61.25em)'\n```\n\n##### DefaultOptions\n\n| name      | require |                       type                       | default | decstiption                                                                                                                  |\n| --------- | :-----: | :----------------------------------------------: | :-----: | ---------------------------------------------------------------------------------------------------------------------------- |\n| unit      |    -    |           `'em'` \\| `'rem'` \\| `'px'`            | `'em'`  | Output unit                                                                                                                  |\n| unitRatio |    -    |                      number                      |  `16`   | Unit ratio as a reference of `'em'` or `'rem'`                                                                               |\n| mediaType |    -    | `'all'` \\| `'screen'` \\| `'print'` \\| `'speech'` | `'all'` | [MDN - Media Query#Media-Types](https://developer.mozilla.org/en/docs/Web/CSS/Media_Queries/Using_media_queries#Media_types) |\n\n---\n\n### Named exported methods\n\n#### `composeMediaQuery(userSelfMediaQuery)`\n\nReturn a new object with `{passed argument object}` + `{media query methods}`\n\nThis function merges media query methods & passed with the object. _**So it's necessary to avoid duplicate property names.**_\n\n| name               | require |  type  | default | decstiption                             |\n| ------------------ | :-----: | :----: | :-----: | --------------------------------------- |\n| userSelfMediaQuery |    ✓    | object |    -    | Object with string media query in value |\n\n\n```javascript\nimport { composeMediaQuery } from '@1natsu/handy-media-query'\n\nconst mediaQueries = composeMediaQuery({\n  small: '@media (min-width: 320px)'\n  middle: '@media (min-width: 768px)'\n  large: '@media (min-width: 1280px)'\n  irregular: `@media (min-height: 400px), screen and (orientation: portrait)`\n})\n```\n\n↓↓ The contents of the generated object are as follows ↓↓\n\n```javascript\nconst mediaQueries = {\n  small: '@media (min-width: 320px)'\n  middle: '@media (min-width: 768px)'\n  large: '@media (min-width: 1280px)'\n  irregular: '@media (min-height: 400px), screen and (orientation: portrait)'\n  min: [Function]\n  max: [Function]\n  between: [Function]\n  …\n  …\n  …\n}\n```\n\n**But, assume a usage like a [Realistic example](#realistic-example)**\n\n#### `pxToEm(value, ratio)`\n\n* Unit converter for px to em\n\n| name  | require |       type       | default | decstiption                                         |\n| ----- | :-----: | :--------------: | :-----: | --------------------------------------------------- |\n| value |    ✓    | string \\| number |    -    | Conversion source px.<br>`\"<number>px\"` or `number` |\n| ratio |    -    |      number      |  `16`   | Unit ratio as a reference of `'em'`                 |\n\n```javascript\nimport { pxToEm } from '@1natsu/handy-media-query'\n\nconst convertToEm = pxToEm(480, 10)\nconsole.log(convertToEm) // 48em\n```\n\n#### `pxToRem(value, ratio)`\n\n* Unit converter for px to rem\n\n| name  | require |       type       | default | decstiption                                         |\n| ----- | :-----: | :--------------: | :-----: | --------------------------------------------------- |\n| value |    ✓    | string \\| number |    -    | Conversion source px.<br>`\"<number>px\"` or `number` |\n| ratio |    -    |      number      |  `16`   | Unit ratio as a reference of `'rem'`                |\n\n```javascript\nimport { pxToRem } from '@1natsu/handy-media-query'\n\nconst convertToRem = pxToRem(480, 10)\nconsole.log(convertToRem) // 48rem\n```\n\n## 💚 Running the tests\n\nwith [Jest](https://jestjs.io/).\n\n```bash\nyarn test\n```\nor\n\n```bash\nnpm run test\n```\n\n<!-- \n## Contributing\n\nPlease read [CONTRIBUTING.md](https://gist.github.com/PurpleBooth/b24679402957c63ec426) for details on our code of conduct, and the process for submitting pull requests to us. -->\n\n## 🏷 Versioning\n\nUse [SemVer](http://semver.org/) for versioning. For the versions available, see the [tags on this repository](https://github.com/1natsu172/handy-media-query/tags). \n\n## ©️ License\n\nMIT © [1natsu172](https://github.com/1natsu172)\n\n## 🙏 Acknowledgments\n\n### Inspiration\n\n* [styled-media-query](https://github.com/morajabi/styled-media-query)\n\n","readmeFilename":"README.md"}