Auto Loss Adapter Layout

一个用于自动布局适配的TypeScript脚本，根据设备尺寸动态调整元素的位置和缩放比例。

功能特性

• 根据设计稿尺寸和设备视口自动计算缩放比例
• 支持多种垂直和水平定位模式
• 支持元素缩放类型（zoomIn/zoomOut）
• 基于TypeScript，提供完整的类型定义

安装

npm install autolossaapterlayout

使用方法

import { elementScaleByLayout } from 'autolossaapterlayout';

const element = document.getElementById('myElement') as HTMLElement;
const config: ElementConfig = {
  scaleType: 'zoomIn',
  vertical: 'middle',
  horizontal: 'center',
  top: 100,
  left: 200,
  width: 300,
  height: 150
};

elementScaleByLayout(element, config);

配置参数

• scaleType: 缩放类型
  • 'zoomIn': 空间充足时放大，空间不足时保持不变
  • 'zoomOut': 空间充足时保持不变，空间不足时缩小
• vertical: 垂直定位模式
  • 'top': 顶部对齐
  • 'topScale': 顶部缩放
  • 'middle': 居中
  • 'bottom': 底部对齐
• horizontal: 水平定位模式
  • 'left': 左侧对齐
  • 'leftScale': 左侧缩放
  • 'center': 居中
  • 'right': 右侧对齐
  • 'fixedRight': 固定右侧
• top, left, width, height: 元素在设计稿中的位置和尺寸

开发

构建

npm run build

项目结构

├── index.ts          # 主要源代码
├── index.html        # 示例页面
├── tsconfig.json     # TypeScript配置
├── package.json      # 项目配置
└── dist/             # 编译输出
    ├── index.js      # 编译后的JavaScript
    └── index.d.ts    # 类型定义文件

许可证

ISC