Skip to content
VUE适配H5应用的框架,采用px自动转rem的方式
JavaScript Vue HTML
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitee
build
config
src
static
test
.babelrc
.editorconfig
.eslintignore
.eslintrc.js
.gitignore
.postcssrc.js
README.en.md
README.md
index.html
package.json

README.md

vue_px_to_rem_h5

介绍

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

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

软件架构

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

安装教程

# create project
vue init gitee:saqqdy/vue_px_to_rem_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不会被计算成rem */
    width: 100px;
    .text {
        /* 这里的样式px不会被计算成rem */
        font-size: 14px;
    }
}
.menu {
    /* 这里的样式px会被计算成rem */
    height: 100px;
    .text {
        /* 这里的样式px会被计算成rem */
        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
  3. 我的Github:https://github.com/saqqdy
  4. 我的npm:https://npmjs.com/~saqqdy
  5. 我的个人网站 http://www.saqqdy.com
You can’t perform that action at this time.