vue-cli2.x rem配置

最新推荐文章于 2023-12-08 16:00:23 发布

一个假的前端男

最新推荐文章于 2023-12-08 16:00:23 发布

阅读量294

点赞数

分类专栏：可视化大屏文章标签： rem

本文链接：https://blog.csdn.net/IT_iosers/article/details/113337398

版权

可视化大屏专栏收录该内容

26 篇文章 2 订阅

订阅专栏

1、移动端

配置 flexible

安装lib-flexible

npm i lib-flexible --save

在项目入口文件 main.js 里引入 lib-flexible引入 lib-flexible

import 'lib-flexible/flexible'

px 转 rem

安装 px2rem-loader

npm install px2rem-loader

在 vue-cli 生成的 webpack 配置中，vue-loader 的 options 和其他样式文件 loader 最终是都是由 `build/utils.js` 里的一个方法生成的。配置 px2rem-loader

我们只需在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px。

以下操作都在build/utils.js中实现

  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      remUnit: 75
    }
  }

同时，在`generateLoaders`方法中添加px2remLoader

const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader] : [cssLoader,px2remLoader]

    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }

在这里插入图片描述
参考

2、PC端可做大屏自适应

修改源码找到node_modules文件里边的lib-flexible文件夹，修改flexible.js文件

在这里插入图片描述

 function refreshRem(){
        var width = docEl.getBoundingClientRect().width;
        if (width / dpr > 540) {//这里有个插件设置的参数，当它大于540的时候最大用540适配，pc肯定大于540了，它就会以540去自适应，指定不行啊/所以怎么办，搞它
            //width = 540 * dpr;
            //修改为以宽度设置，我管你多大啊，你有多大我就有多兼容
            width = width * dpr;
        }
        var rem = width / 10;
        docEl.style.fontSize = rem + 'px';
        flexible.rem = win.rem = rem;
    }