一、安装插件

npm i lib-flexible -S

下载淘宝的flexible插件，-S为生产依赖

npm i px2rem-loader -D

下载将px转换成rem的插件，这样在写的时候就可以根据设计稿愉快的使用px啦，这个插件会自动帮我们转换

二、在入口文件main.js将lib-flexible插件引入

三、在vue.config.js中添加配置 

module.exports = {
  chainWebpack: config => {
    config.module
      .rule("css")
      .test(/\.css$/)
      .oneOf("vue")
      .resourceQuery(/\?vue/)
      .use("px2rem")
      .loader("px2rem-loader")
      .options({
        remUnit: 192 // 设计稿大小比例 / 10
      });
  },
}

remUnit属性用于设置设计稿除以10之后的大小

四、修改flexible.js 文件

全局搜索flexible.js，将refreshRem函数中原本的540替换为width，这样就实现了宽度根据屏幕大小自动适配

五、查看效果

以上全部设置完成后，重新启动项目就可以看见效果啦

# vue.js # javascript # html5
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue