在uni-app框架中使用rem（h5和微信小程序）

将在学习uni-app过程中遇到的问题记录一下：

注意:<page-meta>需要放在页面的第一个标签。

1.在uni-app框架中使用rem（h5和微信小程序）

2.index.html的设置

两种可行性方案

1.设置字体调节页面

可以放大或者缩小目前字号的倍数，通过silder调节，vuex存储

2.写一个scaleFontSize()方法，传入当前字号，获取要调节的倍数，例如当前字号24，通过设置需要调节1.5倍，最后字号就是24*1.5=36号字体

方法可以mixin混入，每个界面都可以调用，这是群里一个大佬@码农系列的想法，灵感来自于i18n多语言切换，亲测可用。写此贴时已征得本人同意。在没有找到解决办法之前，这也不失为一个理想的解决方案，不过比较麻烦的是每一个引用字体的地方都要加上初始化的字体大小，还要考虑到input的placeholder等。

对于一个已经上线并且多达上百个页面的项目来说，这样的工作量实在太大，那么救命的第二个方法来了。

原贴地址

1.安装第三方插件 postcss-px-to-viewport

2.项目根目录创建postcss.config.js，并写入配置：

3.根据页面设置，vuex取出设置大小

4.在每个页面中通过添加page-meta调节， page-meta 配置项参考链接

此种方法navbar和tabbar的字体大小不能改变。

其实uniapp的示例demo APP是可以跟随系统字体大小的变化而变化的，但是我不知道他们是怎么实现的。

---