贵阳网站建设设计,网站备案 异地,励销云,网站开发项目预算表参考地址 https://www.cnblogs.com/WQLong/p/7798822.html1.下载lib-flexible使用的是vue-cliwebpack#xff0c;通过npm来安装的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport ‘lib-flexible/flexible‘3.设置meta标签通过meta标签#…参考地址 https://www.cnblogs.com/WQLong/p/7798822.html1.下载lib-flexible使用的是vue-cliwebpack通过npm来安装的npm i lib-flexible --save2.引入lib-flexible在main.js中引入lib-flexibleimport ‘lib-flexible/flexible‘3.设置meta标签通过meta标签设置设备宽度以及缩放比例4.安装px2rem-loadernpm install px2rem-loader5.配置px2rem-loader这里是重要的一步~~在build文件中找到util.js将px2rem-loader添加到cssLoaders中如const cssLoader {loader:‘css-loader‘,options: {minimize: process.env.NODE_ENV ‘production‘,sourceMap: options.sourceMap}}const px2remLoader {loader:‘px2rem-loader‘,options: {remUnit:75 //这里设置html根字体vant-UI的官方根字体大小是37.5}}同时在generateLoaders方法中添加px2remLoaderfunction generateLoaders (loader, loaderOptions) {const loaders options.usePostCSS ?[cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]if(loader) {loaders.push({loader: loader ‘-loader‘,options: Object.assign({}, loaderOptions, {sourceMap: options.sourceMap})})}if(options.extract) {returnExtractTextPlugin.extract({use: loaders,fallback:‘vue-style-loader‘})}else{return [‘vue-style-loader‘].concat(loaders)}}6.安装 postcss-pxtoremnpm install postcss-pxtorem --save-dev7.在根目录找到.postcssrc.js文件 插入一下代码‘autoprefixer‘: {browsers: [‘Android 4.0‘, ‘iOS 7‘] //添加浏览器前缀 安卓4.0版本ios 7.0版本以上},‘postcss-pxtorem‘: {rootValue:37.5,propList: [‘*‘]}}8.重启一切ok~当配置完之后只需要重启下服务就自动转化为rem了npm run dev
