前端知识=====如何做适配

前端知识=====如何做适配

1、安装lib-flexible插件，可以根据屏幕大小自动变化根元素变化font-size属性

npm install lib-flexible --save-dev

在入口文件main.js里

import 'lib-flexible'

目前还有个弊端，他默认只考虑到移动端，不管你设备尺寸再大font-size最大是54px,所以需要改下源码===打开项目中node_modules\lib-flexible\flexible.js

需要将540改成屏幕宽度改之后

2、安装插件

npm install postcss-px2rem --save
npm install px2rem-loader --save-dev

可以自动根据根元素font-size自动将你写的px单位转化成相对单位rem====前提需要配置下vue.config.js文件

//在根目录下创建vue.config.js
module.exports = {
    css: {
        loaderOptions: {
            css: {},
            postcss: {
                //remUnit为你的设计稿大小 如果为750就处于10  其他尺寸一个道理，默认是分成10份的
                plugins: [require('postcss-px2rem')({ remUnit: 75 }), ]
            }
        }
    }
};

最后调整一下视口，public下面的index.html里

<meta name="viewport" content="width=device-width>

将原来替换掉
有时间去看看meta的知识，

之后你写的任何代码都自动将px转化成rem了

一定要落实到键盘

加油 你不止于此