{"id":15019612,"url":"https://github.com/jp-liu/fit-screen","last_synced_at":"2025-09-09T16:46:17.325Z","repository":{"id":74256023,"uuid":"598896978","full_name":"jp-liu/fit-screen","owner":"jp-liu","description":"Scale-based large-screen adaptive solution","archived":false,"fork":false,"pushed_at":"2024-12-11T08:33:24.000Z","size":1903,"stargazers_count":78,"open_issues_count":0,"forks_count":19,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-29T04:04:12.814Z","etag":null,"topics":["css3","react","react-component","typescript","vue","vue-component"],"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/jp-liu.png","metadata":{"files":{"readme":"README.md","changelog":null,"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,"publiccode":null,"codemeta":null}},"created_at":"2023-02-08T02:43:42.000Z","updated_at":"2025-03-26T02:48:03.000Z","dependencies_parsed_at":null,"dependency_job_id":"5892ea0b-0598-45e4-a0cc-9baf951b2c71","html_url":"https://github.com/jp-liu/fit-screen","commit_stats":{"total_commits":77,"total_committers":2,"mean_commits":38.5,"dds":"0.012987012987012991","last_synced_commit":"3a2ffdbb38f6faa5be298202e459cddc65832ced"},"previous_names":[],"tags_count":9,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Ffit-screen","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Ffit-screen/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Ffit-screen/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/jp-liu%2Ffit-screen/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/jp-liu","download_url":"https://codeload.github.com/jp-liu/fit-screen/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247289409,"owners_count":20914464,"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":["css3","react","react-component","typescript","vue","vue-component"],"created_at":"2024-09-24T19:53:46.024Z","updated_at":"2025-04-05T05:02:49.332Z","avatar_url":"https://github.com/jp-liu.png","language":"TypeScript","funding_links":[],"categories":["Components \u0026 Libraries"],"sub_categories":["UI Layout"],"readme":"\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/jp-liu/fit-screen\"\u003e\u003cimg src=\"https://raw.githubusercontent.com/jp-liu/fit-screen/main/packages/public/logo-vertical.png\" alt=\"FitScreen - Scale-based large-screen adaptive solution\" width=\"300\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  \u003cbr\u003e\n  Scale-based large-screen adaptive solution\n  Everything is based on the design draft's px size, and the adaptation is done by scale, everything is so simple\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@fit-screen/vue\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@fit-screen/vue?color=a1b858\u0026label=\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@fit-screen/react\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@fit-screen/react?color=50a36f\u0026label=\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003ca href=\"https://www.npmjs.com/package/@fit-screen/shared\" target=\"__blank\"\u003e\u003cimg src=\"https://img.shields.io/npm/v/@fit-screen/shared?color=1e8a7a\u0026label=\" alt=\"NPM version\"\u003e\u003c/a\u003e\n  \u003cbr\u003e\n  \u003ca href=\"https://github.com/jp-liu/fit-screen\" target=\"__blank\"\u003e\n    \u003cimg alt=\"GitHub stars\" src=\"https://img.shields.io/github/stars/jp-liu/fit-screen?style=social\"\u003e\n  \u003c/a\u003e\n\u003c/p\u003e\n\n\u003cp align=\"center\"\u003e\n  \u003ca href=\"https://github.com/jp-liu/fit-screen/blob/main/README.md\" target=\"__blank\"\u003eEnglish\u003c/a\u003e\n  \u003ca href=\"https://github.com/jp-liu/fit-screen/blob/main/README.zh_CN.md\" target=\"__blank\"\u003e简体中文\u003c/a\u003e\n\u003c/p\u003e\n\n## 🚀 Features\n\n- 🕶 Seamless migration: Works for Vue 2, Vue3 and React\n- 🌟 Provide public base methods that can be applied to any framework with a little code\n- 🦾 Type Strong: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc)\n- 🌎 No bundler required: Usable via CDN\n\n## 🦄 Useage\n\n### Vue\n\n```bash\nnpm install @fit-screen/vue\n# or\nyarn add @fit-screen/vue\n# or\npnpm install @fit-screen/vue\n```\n\nFor Vue 2.6 or below, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.\n\n```bash\nnpm install @fit-screen/vue @vue/composition-api\n# or\nyarn add @fit-screen/vue @vue/composition-api\n# or\npnpm install @fit-screen/vue @vue/composition-api\n```\n\nIf you're not familiar with using Vue components, you can see a more detailed example here.\n\n[Click to go](https://github.com/jp-liu/fit-screen/blob/main/packages/vue/README.md#-useage)\n\n### React\n\n```bash\nnpm install @fit-screen/react\n# or\nyarn add @fit-screen/react\n# or\npnpm install @fit-screen/react\n```\n\nIf you're not familiar with using React components, you can see a more detailed example here.\n\n[Click to go](https://github.com/jp-liu/fit-screen/blob/main/packages/react/README.md#-useage)\n\n### No Framework\n\n```html\n\u003chtml lang=\"en\"\u003e\n\u003chead\u003exxx\u003c/head\u003e\n\u003cbody\u003e\n  \u003c!-- In the contents of the screen will be presented --\u003e\n  \u003cdiv class=\"screen\"\u003e\n    \u003cdiv class=\"test-left\"\u003exxx\u003c/div\u003e\n    \u003cdiv class=\"test-center\"\u003exxx\u003c/div\u003e\n    \u003cdiv class=\"test-right\"\u003exxx\u003c/div\u003e\n  \u003c/div\u003e\n\n  \u003c!-- \u003cscript src=\"https://unpkg.com/fitscreen.js/dist/fitscreen.min.js\"\u003e\u003c/script\u003e --\u003e\n  \u003cscript src=\"https://unpkg.com/fitscreen.js/dist/fitscreen.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    FitScreen({\n      el: document.querySelector('.test'),\n      width:1920,\n      height:1080,\n      mode:'fit',\n      executeMode:'debounce',\n      waitTime:300,\n      beforeCalculate(scale) {},\n      afterCalculate(scale) {},\n    })\n  \u003c/script\u003e\n\u003c/body\u003e\n\u003c/html\u003e\n```\n\n[Parameters Detail](https://github.com/jp-liu/fit-screen/blob/main/packages/fitscreen/README.md)\n\n## 🚨 Note\n\nYou may encounter the following problems:\n\n1. When components such as `modal` and `message` in the `UI` component library are used in the project, these `modal` and `message` will directly create a new `dom`, which will not be affected by `scale`. Causes its size not to change according to `scale`.\n\n   solution: You can listen to the `scaleChange` event sent by the component, or get the current scale in the `afterafterCalculate` callback function, and then dynamically set `css`\n\n   ```js\n   // example for ElementUI MessageBox\n   const ins = this.$message('test')\n   // tanslateX is needed for elementUI positioning and centering, and needs to be reserved to avoid overwriting the transform attribute. Development depends on the actual situation\n   ins.$el.style.transform: = scale( 动态比例 ) translateX(-50%);\n   // // It needs to be set as the zoom-in/zoom-out point, because the positioning is based on the left border left of the element, so here is left, you can change it according to the actual situation\n   ins.$el.style.transformOrigin = 'left center';\n\n   // or\n   const msg = document.querySelectorAll('.el-message')\n   const els = Array.from(msg)\n   els.forEach((el) =\u003e {\n     el.style.transform: = scale(0.8) translateX(-50%);\n     el.style.transformOrigin = left center;\n   })\n   ```\n\n2. When encountering some map-like (map) large screens, because the canvas canvas is involved, the global scale method may cause map offsets, map interaction confusion, etc..\n\n   Reason: Because the map is drawn on canvas, after the scale is set, the orientation corresponding to the click and other events is different from when it was just drawn, just like the retina screen of the Apple mobile phone. Under the 2x and 3x screens, a point corresponds to 2 and 3 pixels, and when drawing is 1 point to 1 point, so the solution is also simple.。\n\n   Solution: Redraw the map by listening to the `scaleChange` event emitted by the component, or in the `afterafterCalculate` callback function.\n\n3. Chart event hotspot offset, in most cases, will not be involved, if you encounter it, please try the following solutions\n\n   1. Not sure if it works, because I haven't found this problem yet, answers from netizens in the comment area\n\n      ```js\n      // There is a solution to echarts hot zone offset, add this style to the div that renders echarts\n      const style = `\n        width:${(1 / scale) * 100}%;\n        height: Design element height;\n        zoom:${1 / scale};\n        transform:scale(${scale});\n        transform-origin:0% 0%`\n      ```\n\n\u003e I don't know if it can solve your problem. If not, you can discuss it in `issues`. If you have a problem and solve it, you are welcome to raise a `PR` to help others.\n\u003e If this project helps you, please give me a star thank you.😎\n\n## 💻 Extends\n\nOf course, if you're not using `vue` or `react`, but another framework, you can extend your own adaptive components with a plugin public method, such as using `Svelte`\n\n[You can click to see exactly how to use](https://github.com/jp-liu/fit-screen/blob/main/packages/shared/README.md#-useage)\n\n### 🌰 Example\n\n#### **[Vue2.6 or below](https://vercel.com/jp-liu/fit-screen-example-vue2)**\n\n#### **[Vue2.7 or 3.0+](https://vercel.com/jp-liu/fit-screen-example-vue3)**\n\n#### **[React](https://vercel.com/jp-liu/fit-screen-example-react)**\n\n#### Svelte example\n\n[Svelte](https://codesandbox.io/s/fit-screen-shared-svelte-yx5syh)\n[Stackblitz](https://stackblitz.com/edit/vitejs-vite-ucymtl?file=README.md)\n\n## License\n\n[MIT](./LICENSE) License © 2022 [jp-liu](https://github.com/jp-liu)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjp-liu%2Ffit-screen","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjp-liu%2Ffit-screen","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjp-liu%2Ffit-screen/lists"}