css-var-delta

CSS 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.

Demo

Install

cdn

1<script src="https://cdn.jsdelivr.net/npm/css-var-delta@1.0.13/dist/index.js"></script>
2<script>
3  new CssVarDelta.default(
4      ["portrait@360x540", "landscape@960x540"],
5      false
6  );
7</script>

npm

1npm install css-var-delta

1import CssVarDelta from 'css-var-delta';
2
3new CssVarDelta(
4  ['portrait@360x540', 'landscape@960x540'],
5  false
6);

How to use

After initialization, the variable --delta will be added to the root document. Just multiply --delta by px or other dimensions.

css

1.box {
2  background-color: yellow;
3  width: calc(var(--delta, 1) * 100px);
4  height: calc(var(--delta, 1) * 100px);
5}

scss

1@use 'sass:math';
2
3@function cvd($pixels) {
4    @return calc(var(--delta, 1) * #{$pixels + px});
5}
6
7.box {
8  background-color: yellow;
9  width: cvd(100);
10  height: cvd(100);
11}

Core

Options

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.

Methods

destroy()

Remove resize event listener and delta CSS variable.