@astii/autofit

Usage

$ yarn add @astii/autofit

autoScale

//entry of app
import { autoFit, autoScale } from "@astii/autofit";

autoScale({ dw: 375 });

autoFit

//entry of app
import { autoFit, autoScale } from "@astii/autofit";

autoFit({ dw: 375, dh: 667 });

with "viewport"

"px" need convert to "vw" and "vh"

.card {
  /* width: 300px;
  height: 300px; */
  width: calc(300 * var(--pxw));
  height: calc(300 * var(--pxh));
}

with "rem"

"px" need convert to "rem"

.card {
  /* width: 300px;
  height: 300px; */
  width: calc(300 / var(--rem));
  height: calc(300 / var(--rem));
}

Options

Name	Type	Default	Description
dw	number	-	design width
dh	number	window.innerHeight(viewport mode default to 100)	design height
fitType	"viewport" | "rem"	"viewport"	autoFit type

LICENSE

MIT