fitscreen.js
v0.1.0
Published
Scale-based large-screen adaptive solution
Downloads
14
Maintainers
jpliuReadme
fitscreen.js
A fundamental approach to scale-based large-screen adaptive solutions
Everything is based on the design draft's px size, and the adaptation is done by scale, everything is so simple
🦄 Useage
It is recommended that you use it without using the front-end framework. If you use the framework, please check FitScreen
<html lang="en">
<head>xxx</head>
<body>
<!-- the content that will be displayed on the screen -->
<div class="screen">
<div class="test-left">xxx</div>
<div class="test-center">xxx</div>
<div class="test-right">xxx</div>
</div>
<!-- <script src="https://unpkg.com/fitscreen.js/dist/fitscreen.min.js"></script> -->
<script src="https://unpkg.com/fitscreen.js/dist/fitscreen.js"></script>
<script>
const { calcRate, resize, unResize } = FitScreen({
el: document.querySelector('.test'),
width:1920,
height:1080,
mode:'fit',
executeMode:'debounce',
waitTime:300,
beforeCalculate(scale) {},
afterCalculate(scale) {},
})
</script>
</body>
</html>Of course, you can also use package managers such as npm for engineering development
npm install fitscreen.js
# or
yarn add fitscreen.js
# or
pnpm install fitscreen.jsOptions
declare function FitScreen(options: Options): FitScreenResult | undefined
interface FitscreenResult {
/**
* The function of calculating the ratio, you can decide the timing of execution by yourself
*/
calcRate: () => void
/**
* Start listening to the resize event
*/
resize: () => void
/**
* End listening to the resize event
*/
unResize: () => void
}
interface Options {
/**
* Template element, this element is recommended to be set to the size, width and height of the design draft
*/
el: HTMLElement
/**
* The design draft width
* @default 1920
*/
width?: number
/**
* The design draft height
* @default 1080
*/
height?: number
/**
* Calculation mode
*/
mode?: 'fit' | 'scrollX' | 'scrollY' | 'full'
/**
* Represents the execution mode for calculating scaling ratio.
* - throttle: Uses a throttling mechanism to limit the execution frequency.
* - debounce: Uses a debouncing mechanism to delay execution until a certain period of inactivity.
* - none: Executes the function without any throttling or debouncing.
* @default 'debounce'
*/
executeMode?: 'throttle' | 'debounce' | 'none'
/**
* Represents the execution rate for debounce and throttle (unit: ms).
* @default 300
*/
waitTime?: number
/**
* Triggered before calculating correction, which can be calculated by return false to cancel
* Provide the current wide high percentage
*/
beforeCalculate?: (scale: Scale) => boolean | void
/**
* After the calculation of correction
* Provide the current wide high percentage
*/
afterCalculate?: (scale: Scale) => void
}🌰 Example
CodePen CodeSandbox Stackblitz Stackblitz
🚨 Note
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.😎