# adapter-draft

**Repository Path**: account68/adapter-draft

## Basic Information

- **Project Name**: adapter-draft
- **Description**:  根据设计稿的宽度动态设置html的font-size，
 实现当前屏幕为任意分辨率时其宽度和高度均和设计稿在该分辨率时的宽度和高度保持一致

- **Primary Language**: Unknown
- **License**: MulanPSL-2.0
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 1
- **Forks**: 0
- **Created**: 2023-04-16
- **Last Updated**: 2024-05-30

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# adapter-draft

### 介绍
 根据设计稿的宽度动态设置html的font-size，
 实现当前屏幕为任意分辨率时其宽度和高度均和设计稿在该分辨率时的宽度和高度保持一致

### 安装教程
```
npm i adapter-draft
```

### 使用范围
web端任何框架、web原生开发均支持

### 使用说明【基于webpack、vite以及其他打包工具的web框架】

1.全局使用
```
 //main.js
 import {adapterDraft} from 'adapter-draft'
 adapterDraft(size)   //size为设计稿的宽度
```
html的font-size属性被自动进行设置<br/>
如：蓝湖ui设计稿在2000x1080时某一dom的width:120px、height:20px，在1000x980时该dom的width:60px、height:10px<br/>
当size的值被设置为2000的时候，页面上该dom的width、height属性值就写 _120rem、20rem_ <br/>
当size的值被设置为1000的时候，页面上该dom的width、height属性值就写 _60rem、10rem_ <br/>
这样在屏幕变化的时候，该元素的宽高会自动等比例设置，和设计稿始终保持一致。<br/>

2.局部使用
```
  //main.js
  import {adapterDraftPartApply} from 'adapter-draft'
  adapterDraftPartApply(size)  //size为设计稿的宽度
  //使用的组件某一dom上css添加
  .class{
    font-size:var(--adapter-fontSize)
  }
```
添加上述css代码后，该dom元素以及内部子元素可以实现在屏幕变化时，宽高比始终和ui设计稿保持一致<br/>
如：该dom元素A的宽高在设计稿为2000x1080时，显示为width:500px、height:200px，在1000x980时，显示为width:250px、height:100px<br/>
当size的值被设置为2000的时候，页面上该dom的width、height属性值就写 _500em 、200em_ <br/>
当size的值被设置为1000的时候，页面上该dom的width、height属性值就写 _250em、100em_ <br/>
这样在屏幕变化的时候，该dom元素A的宽高会自动等比例设置，和设计稿始终保持一致。<br/>

### 使用说明【web原生开发】
```
 //script
 import {adapterDraft,adapterDraftPartApply} from '/node_modules/adapter-draft'
 //全局使用
 adapterDraft(size)   //size为设计稿的宽度
 //局部使用
 adapterDraftPartApply(size)   //size为设计稿的宽度
```