# flexible-template

**Repository Path**: iTAze/flexible-template

## Basic Information

- **Project Name**: flexible-template
- **Description**: rem 可视化大屏的适配方案
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-11-25
- **Last Updated**: 2021-11-25

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

<!--
 * @Author: your name
 * @Date: 2021-11-25 14:35:04
 * @LastEditTime: 2021-11-25 15:48:45
 * @LastEditors: Please set LastEditors
 * @Description: 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
 * @FilePath: /andeng-flexible/README.md
-->

# 在线体验

## PC大屏适配

下载完，下来安装依赖

### 安装

```bash
npm i
```

### 运行

```bash
npm run serve
```

### 打包

```bash
npm run build
```

### 设置设计稿-转换rem

在根目录下的.postcssrc.js文件下

```js
module.exports = {
    plugins: {
        autoprefixer: {},
        "@njleonzhang/postcss-px-to-rem": {
            unitToConvert: "px",
            widthOfDesignLayout: 3840, // 设计稿的宽度
            unitPrecision: 3, // 十进制的单位.
            selectorBlackList: [".ignore", ".hairlines"], // 过滤那些不用转换的class
            minPixelValue: 1, // 设置要替换的最小像素值.
            mediaQuery: false, // 允许在媒体查询中转换px
        },
    },
};
```

### 设置根节点字体

在main.js下，保证在屏幕缩放的过程中也是16:9的比列

```js
const dashboardFlexible = require('lib-flexible-for-dashboard');
dashboardFlexible.init(16/9)
```

### lib-flexible-for-dashboard

具体参考

[大屏上的全屏页面的自适应适配方案](https://www.njleonzhang.com/2018/08/15/flexible-pc-full-screen.html)