vue 移动端H5网页适配

自己记录一下现在做的项目中的知识点,也方便自己之后查看,哈哈哈哈哈哈哈

一、准备工作
安装依赖
yarn add postcss-px2rem-exclude --save
yarn add lib-flexible --save

这里是vue3.0以上的脚手架搭建的项目,所以需要自己新建postcss.config.js文件;写如下代码;因为我项目中的设计图是750px,所以remUnit:75

module.exports = {
    plugins: {
        autoprefixer: {},
        "postcss-px2rem-exclude": {
            remUnit: 75,
            exclude: /node_modules/i
        }
    }
}

然后设计图上量出来是多少px,就可以直接写了,会自动转换为rem;
但是只有写到style标签内的才起作用哦!!

补充一下全局变量文件设置:
安装依赖vue-cli-plugin-style-resources-loader和style-resources-loader
新建vue.config.js文件,写入如下代码

const path = require('path');

module.exports = {
    lintOnSave: false,
    pluginOptions: {
        'style-resources-loader': {
            preProcessor: 'less',
            patterns: [
                path.resolve(__dirname, './src/assets/less/variable.less'),
            ],
        },
    },
};

你可能感兴趣的:(vue 移动端H5网页适配)