Pixelfit

A lightweight and flexible screen adaptation library for mobile and large-screen devices, supporting responsive scaling and px-rem conversion.

Features

• Mobile adaptation: Automatically scales the root font size (rem) for mobile devices based on the design width.
• Large screen adaptation: Adapts target DOM elements to fit large screen resolutions using transform scaling.
• Utility methods: Includes px2rem and rem2px conversion utilities.
• Type-safe and error-proof: Handles invalid configurations gracefully with default values and validations.

Installation

Install pixelfit via npm:

npm install pixelfit

Usage

Importing the Library

import Pixelfit from 'pixelfit';

Quick Start

1. Mobile Screen Adaptation

const pixelfit = new Pixelfit({ type: 'm', width: 750 });
pixelfit.pixelfit(); // Automatically adapts to the device size

2. Large Screen Adaptation

const pixelfit = new Pixelfit({ 
  type: 'l', 
  width: 1920, 
  height: 1080, 
  target: document.getElementById('app') 
});
pixelfit.pixelfit(); // Adapts the target element for large screens

3. Converting px to rem

// Convert 100px to rem based on a design width of 750px
const remValue = Pixelfit.px2rem(100, 750);
console.log(remValue); // Output: rem value

4. Converting rem to px

// Convert 1rem to px based on a design width of 750px
const pxValue = Pixelfit.rem2px(1, 750);
console.log(pxValue); // Output: px value

API Reference

Constructor

new Pixelfit(options)

Parameter	Type	Default	Description
type	string	'm'	Adaptation type: 'm' for mobile, 'l' for large screens.
width	number	750 (mobile) / 1920 (large)	Design width for scaling.
height	number	1080 (large only)	Design height for large screens.
target	HTMLElement	document.body	Target DOM element for large screen adaptation.

Methods

.pixelfit()

Starts the adaptation process. Automatically resizes elements and applies scaling based on the selected type ('m' or 'l'). Automatically listens for resize events.

.largeScreenAdp()

Applies large screen adaptation. Automatically called when type is 'l'.

.mobileAdp()

Applies mobile screen adaptation. Automatically called when type is 'm'.

Pixelfit.px2rem(px, designWidth = 750)

Converts px to rem.

Parameter	Type	Default	Description
px	number		The pixel value to convert.
designWidth	number	750	The design width for conversion.

Returns: number - The converted rem value.

Pixelfit.rem2px(rem, designWidth = 750)

Converts rem to px.

Parameter	Type	Default	Description
rem	number		The rem value to convert.
designWidth	number	750	The design width for conversion.

Returns: number - The converted px value.

Example Project Structure

project/
├── src/
│   ├── index.js        # Your project entry point
├── dist/
│   ├── pixelfit.min.js # Minified bundle
├── package.json        # NPM package details
└── README.md           # Documentation

Development

Clone the repository and install dependencies:

git clone https://github.com/your-repo/pixelfit.git
cd pixelfit
npm install

Build the library:

npm run build

Run tests:

npm test

License

This project is licensed under the MIT License.