{"_id":"@atom8/postcss-vpx2vw","name":"@atom8/postcss-vpx2vw","dist-tags":{"latest":"0.0.1"},"versions":{"0.0.1":{"name":"@atom8/postcss-vpx2vw","version":"0.0.1","description":"A CSS post-processor that converts vpx to vw and fallback rem.","main":"index.js","scripts":{"demo":"postcss demo/**/*.css -d dist --base demo --config demo/postcss.config.js","test":"echo \"Error: no test specified\" && exit 1"},"repository":{"type":"git","url":"git+ssh://git@github.com/AtoMeight/postcss-vpx2vw.git"},"keywords":["css","rem","pixel","px","vw","viewport","postcss","postcss-plugin"],"funding":{"type":"open","url":"https://github.com/AtoMeight/postcss-vpx2vw"},"author":{"name":"zhiyingzhou"},"license":"MIT","devDependencies":{"clean-publish":"^2.2.0","postcss":"^8.3.6","postcss-cli":"^8.3.1"},"peerDependencies":{"postcss":"^8.3.6"},"_id":"@atom8/postcss-vpx2vw@0.0.1","gitHead":"3ef1a3dba90d8b9fb5f73afe15164380ab1d92d3","bugs":{"url":"https://github.com/AtoMeight/postcss-vpx2vw/issues"},"homepage":"https://github.com/AtoMeight/postcss-vpx2vw#readme","_nodeVersion":"22.9.0","_npmVersion":"10.8.3","dist":{"integrity":"sha512-TrHg3znLo+KPxK3lTPv/Z9TGmzE+LOEx4mWIxX1mLUDLz3LCStYpPfddw82/eSZopv4Dn8uOMzAkTfahP1/VHw==","shasum":"aa4f32db12464829434dee0e50ff5ec7ecd7c634","tarball":"https://registry.npmjs.org/@atom8/postcss-vpx2vw/-/postcss-vpx2vw-0.0.1.tgz","fileCount":4,"unpackedSize":6177,"signatures":[{"keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA","sig":"MEUCIQDpC/AUHbY14v3InnJihQ+t1Tugu19sD2JJ8EdrwIPKMgIgEYG1Xl+AlPlW6X5DCj3P0TZ2IHQsCQNmZqDUExM5PfA="}]},"_npmUser":{"name":"zhiyingzzhou","email":"zhiyingzzhou@gmail.com"},"directories":{},"maintainers":[{"name":"zhiyingzzhou","email":"zhiyingzzhou@gmail.com"},{"name":"zhiyingzhou-atom","email":"Zhiying.zhou@atom8-tech.com"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages","tmp":"tmp/postcss-vpx2vw_0.0.1_1729492136020_0.8548932823887478"},"_hasShrinkwrap":false}},"time":{"created":"2024-10-21T06:28:55.950Z","0.0.1":"2024-10-21T06:28:56.236Z","modified":"2024-10-21T06:28:56.492Z"},"maintainers":[{"name":"zhiyingzzhou","email":"zhiyingzzhou@gmail.com"},{"name":"zhiyingzhou-atom","email":"Zhiying.zhou@atom8-tech.com"}],"description":"A CSS post-processor that converts vpx to vw and fallback rem.","homepage":"https://github.com/AtoMeight/postcss-vpx2vw#readme","keywords":["css","rem","pixel","px","vw","viewport","postcss","postcss-plugin"],"repository":{"type":"git","url":"git+ssh://git@github.com/AtoMeight/postcss-vpx2vw.git"},"author":{"name":"zhiyingzhou"},"bugs":{"url":"https://github.com/AtoMeight/postcss-vpx2vw/issues"},"license":"MIT","readme":"

postcss-px2vw

\n\n

\n \"npm\"\n \"npm\"\n \"npm\"\n \"GitHub\"\n

\n\n\n一款 [PostCSS](https://github.com/ai/postcss) 插件，将 `px` 转换成 `vw` 和 `rem`。\n\n该插件主要结合了 [postcss-pxtorem](https://github.com/cuth/postcss-pxtorem) 和 [postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport) 的功能，精简了不常用的配置。默认将 `vw` 作为优先单位使用，以 `rem` 作为回退模式。考虑到 `vw` 在移动设备的支持度不如 `rem`，这款插件很好的解决了该问题。\n\n## 安装\n\n```bash\n$ npm i @atom/postcss-vpx2vw -D\n```\n\n## 使用\n\n```js\n// .postcssrc.js\nmodule.exports = {\n plugins: {\n '@atom/postcss-vpx2vw ': {}\n }\n}\n```\n\n举例：\n\n```scss\n// input\n.class {\n border: 1px solid black;\n margin-bottom: 1px;\n font-size: 20px;\n line-height: 30px;\n}\n// output\n.class {\n border: 1px solid black;\n margin-bottom: 1px;\n font-size: 0.625rem;\n font-size: 6.25vw;\n line-height: 0.9375rem;\n line-height: 9.375vw;\n}\n```\n\n## 配置\n\n- `viewportWidth`：对应设计图的宽度，用于计算 `vw`。默认 `750`，指定 `0` 或 `false` 时禁用\n- `rootValue`：根字体大小，用于计算 `rem`。默认 `75`，指定 `0` 或 `false` 时禁用\n- `unitPrecision`：计算结果的精度，默认 `5`\n- `minPixelValue`：小于等于该值的 `px` 单位不作处理，默认 `1`\n\n> 注意：该插件只会转换 `px` 单位。`rootValue` 一般建议设置成 `viewportWidth / 10` 的大小，将设计图分成10等分。由于浏览器有最小字体限制，如果设置得过小，页面可能跟预期不一致\n\n如果要使用 `rem` 单位，需要自己通过 `js` 来动态计算根字体的大小。如果将设计图分成 10 等分计算，那么根字体的大小应该是 `window.innerWidth / 10`。\n\n## 最后\n\n如果你觉得对你有帮助，欢迎 star 和 issue\n","readmeFilename":"README.md"}