Vue 实现PC端和移动端的自适应

1、Vue 实现PC端和移动端的自适应

步骤如下:
1.1、 安装lib-flexible

npm i lib-flexible --save

1.2、 main.js 里 引入 lib-flexible

 import 'lib-flexible'

1.3、 在项目根目录的 index.html 中添加如下 meta


1.4、安装px2rem-loader,将css中的px转成rem

npm install px2rem-loader --save

1.5、配置 px2rem-loader

// build/utils.js 

//新增
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit:75
    }
  }
  
//修改
 function generateLoaders (loader, loaderOptions) {
    // 修改loaders为如下
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader,px2remLoader] : [cssLoader,px2rem-loader]

   // 略过。。。。。。。
}    

1.6、重启

参考链接 https://blog.csdn.net/fengtingyan/article/details/87816717

你可能感兴趣的:(Vue,lib-flexible,Vue实现PC和移动端自适应)