@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