Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/jp-liu/fit-screen
Scale-based large-screen adaptive solution
https://github.com/jp-liu/fit-screen
css3 react react-component typescript vue vue-component
Last synced: about 1 month ago
JSON representation
Scale-based large-screen adaptive solution
- Host: GitHub
- URL: https://github.com/jp-liu/fit-screen
- Owner: jp-liu
- License: mit
- Created: 2023-02-08T02:43:42.000Z (almost 2 years ago)
- Default Branch: main
- Last Pushed: 2023-10-27T07:24:31.000Z (about 1 year ago)
- Last Synced: 2024-09-27T19:20:42.534Z (about 2 months ago)
- Topics: css3, react, react-component, typescript, vue, vue-component
- Language: TypeScript
- Homepage:
- Size: 1.81 MB
- Stars: 68
- Watchers: 3
- Forks: 17
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
Scale-based large-screen adaptive solution
Everything is based on the design draft's px size, and the adaptation is done by scale, everything is so simple
## đ Features
- đļ Seamless migration: Works for Vue 2, Vue3 and React
- đ Provide public base methods that can be applied to any framework with a little code
- đĻž Type Strong: Written in [TypeScript](https://www.typescriptlang.org/), with [TS Docs](https://github.com/microsoft/tsdoc)
- đ No bundler required: Usable via CDN
## đĻ Useage
### Vue
```bash
npm install @fit-screen/vue
# or
yarn add @fit-screen/vue
# or
pnpm install @fit-screen/vue
```
For Vue 2.6 or below, [@vue/composition-api](https://www.npmjs.com/package/@vue/composition-api) is required separately.
```bash
npm install @fit-screen/vue @vue/composition-api
# or
yarn add @fit-screen/vue @vue/composition-api
# or
pnpm install @fit-screen/vue @vue/composition-api
```
If you're not familiar with using Vue components, you can see a more detailed example here.
[Click to go](https://github.com/jp-liu/fit-screen/blob/main/packages/vue/README.md#-useage)
### React
```bash
npm install @fit-screen/react
# or
yarn add @fit-screen/react
# or
pnpm install @fit-screen/react
```
If you're not familiar with using React components, you can see a more detailed example here.
[Click to go](https://github.com/jp-liu/fit-screen/blob/main/packages/react/README.md#-useage)
### No Framework
```html
xxx
xxx
xxx
xxx
FitScreen({
el: document.querySelector('.test'),
width:1920,
height:1080,
mode:'fit',
executeMode:'debounce',
waitTime:300,
beforeCalculate(scale) {},
afterCalculate(scale) {},
})
```
[Parameters Detail](https://github.com/jp-liu/fit-screen/blob/main/packages/fitscreen/README.md)
## đ¨ Note
You may encounter the following problems:
1. 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`.
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`
```js
// example for ElementUI MessageBox
const ins = this.$message('test')
// 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
ins.$el.style.transform: = scale( å¨ææ¯äž ) translateX(-50%);
// // 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
ins.$el.style.transformOrigin = 'left center';
// or
const msg = document.querySelectorAll('.el-message')
const els = Array.from(msg)
els.forEach((el) => {
el.style.transform: = scale(0.8) translateX(-50%);
el.style.transformOrigin = left center;
})
```
2. 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..
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.ã
Solution: Redraw the map by listening to the `scaleChange` event emitted by the component, or in the `afterafterCalculate` callback function.
3. Chart event hotspot offset, in most cases, will not be involved, if you encounter it, please try the following solutions
1. Not sure if it works, because I haven't found this problem yet, answers from netizens in the comment area
```js
// There is a solution to echarts hot zone offset, add this style to the div that renders echarts
const style = `
width:${(1 / scale) * 100}%;
height: Design element height;
zoom:${1 / scale};
transform:scale(${scale});
transform-origin:0% 0%`
```
> 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.
> If this project helps you, please give me a star thank you.đ
## đģ Extends
Of 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`
[You can click to see exactly how to use](https://github.com/jp-liu/fit-screen/blob/main/packages/shared/README.md#-useage)
### đ° Example
#### **[Vue2.6 or below](https://vercel.com/jp-liu/fit-screen-example-vue2)**
#### **[Vue2.7 or 3.0+](https://vercel.com/jp-liu/fit-screen-example-vue3)**
#### **[React](https://vercel.com/jp-liu/fit-screen-example-react)**
#### Svelte example
[Svelte](https://codesandbox.io/s/fit-screen-shared-svelte-yx5syh)
[Stackblitz](https://stackblitz.com/edit/vitejs-vite-ucymtl?file=README.md)
## License
[MIT](./LICENSE) License Š 2022 [jp-liu](https://github.com/jp-liu)