# vue_px_to_viewport_h5

**Repository Path**: saqqdy/vue_px_to_viewport_h5

## Basic Information

- **Project Name**: vue_px_to_viewport_h5
- **Description**: VUE适配H5应用的框架，采用px自动转vw的方式
- **Primary Language**: JavaScript
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: https://gitee.com/saqqdy/vue_px_to_viewport_h5
- **GVP Project**: No

## Statistics

- **Stars**: 3
- **Forks**: 0
- **Created**: 2019-03-17
- **Last Updated**: 2023-02-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# vue_px_to_viewport_h5

### 介绍
移动端H5适配一直是困扰前端工程师的大问题，有关于移动端的布局适配方案一直以来都是众说纷纭，对应的解决方案也是有很多种。从最原始的px => rem => vw，随着viewport单位越来越受到众多浏览器的支持，到目前为止不管是哪一种方案，都还存在一定的缺陷。言外之意，还没有哪一个方案是完美的。

其实用什么方案不是重点，重点是我们究竟怎么去实现从UI设计文档到计算出对应宽高字体大小这个过程。今天我们重点来解决这个痛点。

### 软件架构
本框架是基于VUE CLI2生成的基本模板，集成了Vuex、Vue-router、e2e/unit等基础插件。在此基础上添加了对px到vw单位的自动处理插件


### 安装教程

``` bash
# create project
vue init gitee:saqqdy/vue_px_to_viewport_h5 myproject
# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

# run unit tests
npm run unit

# run e2e tests
npm run e2e

# run all tests
npm test
```

### 使用说明

#### 1.固定宽高比的容器

html
```
<div class="aspectratio">
    <div class="aspectratio-content">
        这里是你的内容
    </div>
</div>
```
css
```
.aspectratio {
    /* 这里只写aspect-ratio属性 */
    aspect-ratio: '16:9';
}
.aspectratio {
    /* 另起一行写其他属性 */
    width: xx;
    height: xx;
    ...
}
```

#### 2.不走自动计算的样式

不需要自动计算的样式请以"ignore"、"hairlines"或者"ig-"开头
html
```
<div class="ig-menu menu">
    <div class="text">
        这里是你的内容
    </div>
</div>
```
css
```
.ig-menu {
    /* 这里的样式px不会被计算成vw */
    width: 100px;
    .text {
        /* 这里的样式px不会被计算成vw */
        font-size: 14px;
    }
}
.menu {
    /* 这里的样式px会被计算成vw */
    height: 100px;
    .text {
        /* 这里的样式px会被计算成vw */
        font-size: 14px;
    }
}
```

### 参与贡献

1. Fork 本仓库
2. 新建 Feat_xxx 分支
3. 提交代码
4. 新建 Pull Request


### 我的相关

1. 使用 Readme\_XXX.md 来支持不同的语言，例如 Readme\_en.md, Readme\_zh.md
2. 我的码云：[https://gitee.com/saqqdy](https://gitee.com/saqqdy)
3. 我的Github：[https://github.com/saqqdy](https://github.com/saqqdy)
4. 我的npm：[https://npmjs.com/~saqqdy](https://npmjs.com/~saqqdy)
5. 我的个人网站 [http://www.saqqdy.com](http://www.saqqdy.com)