VUE CLI3适配H5应用的框架，采用px自动转vw的方式

VUE CLI3适配H5应用的框架，采用px自动转vw的方式

vue_cli3_px_to_viewport_h5

介绍

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

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

软件架构

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

安装教程

vue create gitee:saqqdy/vue_cli3_px_to_viewport_h5 myprojectnpm installnpm run serve

使用说明

1.固定宽高比的容器

html

css

.aspectratio { /* 这里只写aspect-ratio属性 */ aspect-ratio: '16:9';}.aspectratio { /* 另起一行写其他属性 */ width: xx; height: xx; ...}

2.不走自动计算的样式

不需要自动计算的样式请以"ignore"、"hairlines"或者"ig-"开头 html

css

.ig-menu { /* 这里的样式px不会被计算成vw */ width: 100px; .text { /* 这里的样式px不会被计算成vw */ font-size: 14px; }}.menu { /* 这里的样式px会被计算成vw */ height: 100px; .text { /* 这里的样式px会被计算成vw */ font-size: 14px; }}

参与贡献

Fork 本仓库新建 Feat_xxx 分支提交代码新建 Pull Request

我的相关

使用 Readme_XXX.md 来支持不同的语言，例如 Readme_en.md, Readme_zh.md我的码云：https://gitee.com/saqqdy我的Github：https://github.com/saqqdy我的npm：https://npmjs.com/~saqqdy我的个人网站 http://saqqdy.com

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。