{"id":14968159,"url":"https://github.com/ospoon/postcss-dynamic-pixel","last_synced_at":"2025-08-03T00:34:49.305Z","repository":{"id":227475367,"uuid":"771523478","full_name":"OSpoon/postcss-dynamic-pixel","owner":"OSpoon","description":"零负担实现像素级 UI 缩放","archived":false,"fork":false,"pushed_at":"2024-05-20T13:56:32.000Z","size":307,"stargazers_count":3,"open_issues_count":0,"forks_count":1,"subscribers_count":1,"default_branch":"master","last_synced_at":"2025-01-31T12:51:27.643Z","etag":null,"topics":["pixel","postcss","postcss-plugin"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/OSpoon.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null}},"created_at":"2024-03-13T13:06:23.000Z","updated_at":"2024-05-20T13:56:35.000Z","dependencies_parsed_at":"2024-03-18T03:46:38.833Z","dependency_job_id":null,"html_url":"https://github.com/OSpoon/postcss-dynamic-pixel","commit_stats":null,"previous_names":["ospoon/postcss-dynamic-pixel"],"tags_count":6,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSpoon%2Fpostcss-dynamic-pixel","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSpoon%2Fpostcss-dynamic-pixel/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSpoon%2Fpostcss-dynamic-pixel/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/OSpoon%2Fpostcss-dynamic-pixel/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/OSpoon","download_url":"https://codeload.github.com/OSpoon/postcss-dynamic-pixel/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":238235622,"owners_count":19438725,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["pixel","postcss","postcss-plugin"],"created_at":"2024-09-24T13:39:24.369Z","updated_at":"2025-02-11T04:30:50.159Z","avatar_url":"https://github.com/OSpoon.png","language":"TypeScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# postcss-dynamic-pixel\n\n\u003e Dynamic Pixel is an adaptation for pixel-level UI scaling that dynamically modifies CSS pixel values based on the proportion of browser viewport width to design draft width.\n\nUse [postcss-dynamic-pixel](https://github.com/OSpoon/postcss-dynamic-pixel) to achieve pixel-level UI scaling without adding any burden.\n\n[中文文档](./README_zh.md)\n\n## Formula：\n\n```bash\nActual pixel = Design Draft UI size * viewport width / Design draft width\n```\n\n| Design Draft UI size        | viewport width | Design draft width | Actual pixel    |\n| ---------------- | ---- | ----- | ------- |\n| font-size: 16px; | 1600 | 1600  | 16px    |\n| font-size: 16px; | 1366 | 1600  | 13.66px |\n| font-size: 16px; | 1920 | 1600  | 19.2px  |\n\nPS: Viewports in the table are all 100vw wide;\n\n## Installation：\n\n```bash\nnpm install postcss postcss-dynamic-pixel --save-dev\n```\n\n## Configuration：\n\n```javascript\n// ./postcss.config.cjs\nmodule.exports = {\n  plugins: {\n    'postcss-dynamic-pixel': {\n      idealViewportWidth: 750,\n      currentViewportWidth: 100,\n      minViewportWidth: 320,\n      maxViewportWidth: 1440,\n    },\n  },\n}\n```\n\n## Options：\n\n```javascript\nexport interface DynamicPixelOptions {\n  /* Ideal window width, design width, set by pixel value, but omit unit (px) */\n  idealViewportWidth?: number\n  /* Current window width, set by viewport value, but omit unit (vw) */\n  currentViewportWidth?: number\n\n  /* Minimum window width, set by pixel value but omit unit (px) */\n  minViewportWidth?: number\n  /* Maximum window width, set by pixel value but omit unit (px) */\n  maxViewportWidth?: number\n\n  /* Ideal font size, set by pixel value, but omit the unit (px) */\n  idealFontSize?: number\n\n  /* Whether to replace the original value */\n  replace?: boolean\n\n  /* A list of skipped properties */\n  skipProps?: string[]\n  /* Skip a list of selectors */\n  skipSelectors?: string[] | RegExp[]\n  /* Whether to process pixel values in media queries */\n  mediaQuery?: boolean\n  /* Excluded file list */\n  exclude?: RegExp\n}\n```\n\n## Previews：\n\n```bash\nnpm run example\n```\n\n## Compatibility：\n\n![Image.png](https://github.com/OSpoon/postcss-dynamic-pixel/assets/10126623/077ca3f9-4a91-482f-aee5-fb287dcdd25f)\n\n![Image.png](https://github.com/OSpoon/postcss-dynamic-pixel/assets/10126623/9fda3cb8-edfb-4b1e-bd1b-11c8600a6d33)\n\n## Inspiration：\n\n[掘金付费小册《现代 Web 布局 · 大漠 著》如何像素级完美还原一个可缩放的 UI 界面？章节的 PostCSS 插件实现](https://juejin.cn/book/7161370789680250917/section/7165496907714789407#heading-14)\n\n[Uniform UI viewport scaling demo](https://codepen.io/gbnikolov/pen/oNZRNQR)\n\n## Thanks：\n\n[https://juejin.cn/user/1908407916041614](https://juejin.cn/user/1908407916041614)\n\n[https://github.com/evrone/postcss-px-to-viewport](https://github.com/evrone/postcss-px-to-viewport)\n\n## Licence：\n\n[MIT](./LICENSE) License © 2024-PRESENT [OSpoon](https://github.com/OSpoon)\n\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fospoon%2Fpostcss-dynamic-pixel","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fospoon%2Fpostcss-dynamic-pixel","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fospoon%2Fpostcss-dynamic-pixel/lists"}