Library for calculating the delta of the screen size and setting it as a CSS variable. Extremely useful for web games and responsive design.
npm install css-var-deltaCSS Variable Delta - Library for calculating the delta of the screen size and setting it as a CSS variable.
Extremely useful for web games and responsive design.
``html`
`bash`
npm install css-var-delta
`js
import CssVarDelta from 'css-var-delta';
new CssVarDelta(
['portrait@360x540', 'landscape@960x540'],
false
);
`
After initialization, the variable --delta will be added to the root document. Just multiply --delta by px or other dimensions.
`css`
.box {
background-color: yellow;
width: calc(var(--delta, 1) * 100px);
height: calc(var(--delta, 1) * 100px);
}
`css
@use 'sass:math';
@function cvd($pixels) {
@return calc(var(--delta, 1) * #{$pixels + px});
}
.box {
background-color: yellow;
width: cvd(100);
height: cvd(100);
}
`
#### config
string[] ['portrait@360x540', 'landscape@960x540']
Config screen sizes for delta calculation in format orientation@widthxheight.
Where orientation is 'portrait' or 'landscape'.
#### debug
boolean false`
Debug mode, display delta, orientation, and current config in the console.
#### destroy()
Remove resize event listener and delta CSS variable.