一、方法一：rem 布局

在主入口：index.html，<head> 标签内添加如下JS 代码：（实现在标准 375px宽度适配下，100px = 1rem。）

  <script>
    (function () {
      // 在标准 375px 适配下，100px = 1rem;
      var baseFontSize = 100;  
      var baseWidth = 375;

      var set = function () {
        var clientWidth = document.documentElement.clientWidth || window.innerWidth;

        var rem = 100;
        if (clientWidth != baseWidth) {
          rem = Math.floor(clientWidth / baseWidth * baseFontSize);
        }

        document.querySelector('html').style.fontSize = rem + 'px';
      }
      set();

      window.addEventListener('resize', set);
    }());
   
  </script>

 

 

二、方法二：lib-flexible 插件实现

1、安装插件

npm i lib-flexible --save        // 载lib-flexible
npm install px2rem-loader        // 安装px2rem-loader

2、在main.js中引入lib-flexible

 

import 'lib-flexible/flexible'

3、在 index.html 中添加：移动适配 meta标签

 

<meta name="viewport" content="width=device-width,initial-scale=1.0">
//注意这两个的区别，建议添加下面的meta，反正点击输入框，页面自动缩放
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">

4、更改配置

在 build/util.js 中 按如下两更改

（1）、将px2rem-loader添加到cssLoaders中

（1）、将px2rem-loader添加到cssLoaders中

 

const cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      //一般设置75
      remUnit: 35
    }
  }

（2）、在generateLoaders方法中添加px2remLoader

 


  function 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
        })
      })
    }

    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }

 

 

总结要修改的地方

添加位置.png

5、重启

 

npm run dev    // 重新运行

这里需要注意：

1、 lib-flexible：是 rem 的适配插件。（例：750px == 10rem）
2、px2rem-loader ：是为了方便在书写CSS时，输入 px 会 自动转为 rem。
3、有时 用 ‘px2rem-loader ’ 插件，发现 rem 转换不正确。可能是开发工具设置了其他的插件转换，将其他的插件转换设置为想要的转换就行。【我就遇到过，巨坑。。。】

参考文献：

https://github.com/JD-Smart-FE/vue-stone （移动常用端样式插件：vue-stone）
https://blog.csdn.net/huangxiaoguo1/article/details/80284484 （px 转 rem 插件）



作者：大大的小小小心愿
链接：https://www.jianshu.com/p/c7d4b1835eaf
来源：简书
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。

# vue.js # npm # 前端
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