字体适配

字体适配

1. 个人使用方案

lib-flexible、px2rem

1.首先安装lib-flexible：

npm i lib-flexible --save

2.安装px2rem：（npm地址）

npm i px2rem-loader --save -dev

3.引入flexible：（在入口main.js中）

import 'lib-flexible/flexible.js'

需要注意的是，官方插件中设置的默认宽度是540px，如果项目出现了54px的bug，或者你想要750px或者其他尺寸，请参照下方自行修改：（lib-flexible/flexible.js）等你遇见了就明白了！！

4.配置px2rem：

• 在_webpack_中的配置：（remUni： 75 ，是通过设计稿宽度 / 10 算出来的----750 / 10 = 75）

• vue-cli中的配置参照官网

还有 / px / 、 / no / 等用法

如果出现问题还有可能是viewport的原因，默认我们是需要删除viewport的，lib-flexible会自动给我们添加。

其他问题可以参考如下

2. 移动端字体适配问题

可以通过在vue main.js 文件中写方法，动态的改变html字体的大小，然后在具体组件中通过rem实现动态的适配。
具体代码如下：

// rem适配 动态设置网页字体的大小
window.onresize = setHtmlFontSize;
function setHtmlFontSize(){
    let htmlWidth = document.documentElement.clientWidth || document.body.clientWidth;
    const htmlDom = document.getElementsByTagName('html')[0];
    if (htmlWidth >= 750) {
        htmlWidth = 750;
        htmlDom.style.fontSize = htmlWidth / 10 + 'px';
    } else {
        htmlDom.style.fontSize = htmlWidth / 10 + 'px';

    }
    window.console.log(htmlWidth);
}
setHtmlFontSize();

3. vue-cli3.0 使用px2rem 或 postcss-plugin-px2rem

关于配置的一篇博客

4. 在vue中使用flexible响应式布局——默认html字体大小（font-size)是54px的问题

修改配置方法
相关博客

5.rem和px的转换

VSCode的插件是：cssrem
相关博客

1. 首先rem是根据根html的字体大小来变化的，默认html根字体大小为16px，也就是1rem=16px
2. 我们安装rem px转换插件后，设置插件的rootFontSize为75px，所以此时的1rem = 75px
3. 给的设计稿是750px，所以设计稿的总宽为10rem
   

6. flexible.js 布局详解

需要注意的就是flexible.js 中有一个540px的问题,现象就是屏幕在监听windowResize事件的时候，HTML的大小会发生抖动。